ader
loader 让 webpack 可以去处理那些非 JavaScript 文件（ webpack 自身只理解 JavaScript ）。loader 可以将所有类型的文件转换为 webpack 能够有效处理的模块，例如，开发的时候使用 ES6 ，通过 loader 将 ES6 的语法转为 ES5 ，如下配置：
const config = {
entry: "./src/main.js", output: {
filename: "bundle.js", path: path.resolve(__dirname, 'dist')
}, module: {
rules: [
{
test: /.js$/, exclude: /node_modules/, loader: "babel-loader", options: [
presets: ["env"]
]
}
]
}}
插件 (plugins)
loader 被用于转换某些类型的模块，而插件则可以做更多的事情。包括打包优化、压缩、定义环境变量等等。插件的功能强大，是 webpack 扩展非常重要的利器，可以用来处理各种各样的任务。使用一个插件也非常容易，只需要 require() ，然后添加到 plugins 数组中。
// 通过 npm 安装const HtmlWebpackPlugin = require('html-webpack-plugin');// 用于访问内置插件 const webpack = require('webpack');
const config = {
module: {
rules: [
{
test: /.js$/, exclude: /node_modules/, loader: "babel-loader"
}
]
}, plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]};
利用 webpack 搭建应用
webpack.config.js
const path = require('path');
module.exports = {
mode: "development", // "production" | "development"
// 选择 development 为开发模式， production 为生产模式
entry: "./src/main.js", output: {
filename: "bundle.js", path: path.resolve(__dirname, 'dist')
}, module: {
rules: [
{
test: /.js$/, exclude: /node_modules/, loader: "babel-loader", options: [
presets: ["env"]
]
}
]
}, plugins: [
... ]}
上述例子构建了一个最简单的配置，webpack 会从入口 main.js 文件进行构建，通过 loader 进行js转换，输出一个为 bundle.js 的文件，至此一整个过程就构建完成。
gulp
gulp 是一个基于流的自动化构建工具，具有易于使用、构建快速、插件高质和易于学习的特点，常用于轻量级的工程中。
如何使用？
全局安装 gulp:
$ npm install --global gulp
在项目中引入依赖:
$ npm install --save-dev gulp
在项目根目录下创建名为 gulpfile.js 的文件:
const gulp = require('gulp');// default 表示一个任务名，为默认执行任务gulp.task('default', function() {
// 放置默认的任务代码})运行 gulp:
$ gulp
利用 gulp 搭建应用
const gulp = require('gulp');const uglify = require("gulp-uglify");
gulp.task('default', function() {
gulp.src('./src/main.js')
.pipe(uglify())
.pipe(gulp.dest('./dist'));})
参考文章
Node.js 教程
Webpack 入门教程
NPM 使用介绍
