这是我第二次学习webpack了，初见他时，我是一脸懵逼的，这次再见时，稍微轻松了一点，现在写下这份学习笔记，用来巩固自己的记忆，也可以在以后发生遗忘时，作为一份用来回顾的资料。
本次使用webpack的版本号为 3.7.1
学习资源：
慕课网教程：http://www.imooc.com/learn/802
webpack官网中文版：https://doc.webpack-china.org
介绍：
webpack的官方介绍中，将webpack描述为一个模块打包器，功能是将前端开发项目中的各个文件，按照模块化的方式打包成一个js文件。实际上webpack的功能非常强大，除了上述的核心功能，通过对webpack进行合理的设置，我们可以实现以下的功能：
- 解析sass/less文件
- 解析ES6
- 解析VUE等框架的模块
- 将图片资源转换为Base64
- 压缩文件(html,css,js)
- 热更新
安装：
webpack是node下的一个模块，所以安装webpack需要使用npm。
首先，使用 npm install webpack -g 进行全局安装，这样才可以在命令行使用webpack命令
项目中，使用 npm init 进行文件目录初始化，然后使用 npm install webpack --save-dev 在本地安装
起步&&模块化打包：
webpack的编译命令可以直接在命令行输入，但是在项目中，我们使用配置文件来执行webpack，所以这里不对webpack的命令进行过多的叙述。webpack的配置文件需要命名为 webpack.config.js ，这样，在该文件目录下执行 webpck 命令，就可以启动配置文件。
现在，我们设定，有这样的一个文件目录：
- dist
- js
- src
- script
- main.js
- style
- common.css
- index.html
- package.json
- webpack.config.js
其中，webpack.config.js文件中的内容如下：
const path = require('path');
module.exports = {
entry: './src/script/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[hash]_bundle.js',
// publicPath: 'http://www.imooc.com/' // 打包后文件的公共地址
}
}
webpack 的配置很简单，在理解了各个参数的概念和用法后，书写对应的参数就可以了
entry用来定义入口文件，分为单入口文件，多入口文件，多页面应用三种应用情景
详情查看：https://doc.webpack-china.org/concepts/entry-points/
output用来进行输出文件的相关设置，path属性规定输出文件夹的位置，需要配合node.js下的path模块使用，filename规定输出文件的输出路径和名称，这个属性下可以使用 [name]、[hash] 等变量
详情查看：https://doc.webpack-china.org/concepts/output/
插件&&js文件压缩&&HTML处理：
plugins属性用来进行插件的相关设置
大部分 webpack 的插件和 Loader 都是一个独立的或几个互相依赖的npm包，在使用前需要使用 CLI(命令) 进行安装
这里使用到了html-webpack-plugin插件，使用npm install --save-dev html-webpack-plugin安装
该插件引用一个入口html文件，进行处理后输出一个html文件，插件可以完成的处理内容包含：
- 完成对指定js文件的引用并可规定文件引用的位置
- 在入口html文件中定义变量，在webpack中为其赋值
- 对html文件进行压缩处理
webpack.config.js中的相关内容如下：
在官网给出的例子中，用到了new webpack.optimize.UglifyJsPlugin()插件，可以对js文件进行压缩处理
插件部分详情查看：https://doc.webpack-china.org/plugins/
html-webpack-plugin 详情查看：https://doc.webpack-china.org/plugins/html-webpack-plugin
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/script/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[hash]_bundle.js',
// publicPath: 'http://www.imooc.com/' // 打包后文件的公共地址
}，
plugins: [
// 将js文件进行压缩
// new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({
template: './index.html', // 规定模版文件
filename: 'index.html', // 规定文件名
inject: 'head', // 规定js文件引用的位置
title: 'webpack is good', // 自定义变量
// 进行html文件压缩时的选项
minify: {
// removeComments: true,
// collapseWhitespace: true
},
chunk: ['main'],
// excludeChunks: ['b'] // 引入除了 b 之外的全部模块
})
]
}
Loader
Loader的功能是文件的转换，譬如将ES6转换为ES5，将sass转换为css等。
使用Loader时需要将该Loader依赖的npm包下载下来
以 css-loader 和 style-loader 为例：
css-loader 和 style-loader 的功能是将css文件转换为js模块，页面可以通过引用该模块来获得css样式
下载： npm install --save-dev css-loader style-loader
配置：
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
exclude: /node_modules/,
include: /src/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' }
]
}
]
}
}
module.rules下可以配置多个Loader，test是规定文件后缀名的正则表达式，exclude规定了排除掉的文件夹，include相反，use表明需要使用的loader
更多Loader - babel-loader、postcss-loader、sass-loader、file-loader、url-loader
下面是 babel-loader、postcss-loader、sass-loader、file-loader、url-loader 的配置方式
module: {
rules: [
// {
// test: /\.css$/,
// use: [{
// loader: 'style-loader'
// }, {
// loader: 'css-loader'
// }, {
// loader: 'postcss-loader'
// }]
// },
{
test: /\.scss$/,
use: [{
loader: "style-loader" // 将 JS 字符串生成为 style 节点
}, {
loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
}, {
loader: 'postcss-loader'
}, {
loader: "sass-loader" // 将 Sass 编译成 CSS
}]
},
{
test: /\.js$/,
exclude: /node_modules/,
include: /src/,
loader: "babel-loader"
},
// {
// test: /\.(png|jpg|gif)$/,
// use: [
// {
// loader: 'file-loader',
// options: {
// outputPath: 'images/'
// }
// }
// ]
// },
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 300000, // 小于300kb则进行转换
// mimetype: 'image/png', // 指定需要转换的文件的类型
fallback: 'file-loader',
outputPath: 'images/'
}
}
]
}
]
}
babel-loader http://babeljs.io/
用来将ES6转化为ES5
需要新建.babelrc文件配置转化的目标版本
依赖其他的包
在这里可以查看下面几个loader的详情：https://doc.webpack-china.org/loaders/
postcss-loader 可以对css进行预解析、兼容性补全、压缩
需要新建postcss.config.js 文件进行配置
依赖postcss-import(支持css文件的引用) 、postcss-cssnext(进行兼容性补全)、cssnano(进行css压缩)
sass-loader 可以用来对sass文件进行预解析
file-loader 将项目中的图片等资源存放到合理的位置
url-loader 将项目中的图片等资源按照大小限制，转换为Base64或者启用file-loader
