Webpack的学习之旅
1. 打开cmd,进入项目文件夹，输入命令cnpm init,会在文件夹的根目录里面生成package.json文件,他即使项目引用的nodejs（cnpm）插件的索引，用cnpm install可以安装所有罗列的插件。
2. 在文件的根目录下新建webpack.config.js, 它的就是一个项目的配置文件,告诉webpack需要做什么。
3. 在根目录下新建dist文件夹，用于存放打包后的文件。
4. 全局安装webpack。 命令cnpm install -g webpack
5. 安装webpack的依赖包 cnpm install webpack –save-dev
6. 在package.json的script里面配置webpack --config webpack.config.js --progress --display-modules --colors --display-reasons，以后打包的过程中可以看到打包的过程。
7. 在webpack.config.js里开始配置
entry:入口文件
output:{
path:打包后的入口文件的目录
filename: 打包后的入口文件的名字
publicPath:打包后的给文件添加正式环境的路径}
8. 安装html-webpack-plugin插件，处理html文件
命令:cnpm i html-webpack-plugin –save-dev,在package.json的devDependencies里面成功的信息。
9. 在webpack.config.js中引入插件,
plugins:[
new htmlWebpackPlugin({
template:模板文件
filename:打包后的文件名字
title:给打包后的文件添加标题
inject:引入的js等文件放在html
(body或者head)。
minify:{
removeComments:删除注释
collapseWhitespace:删除空格
}
})]
10.安装clean-webpack-plugin,可以清除打包过程中旧的带版本号的重复文件，让文件只显示最新版本的文件。
a) 在webpack.config.js中引入插件,格require(“件名字”)
b) 在plugins里面实例化改插件，new 插件名字(‘[目录]’)
指定目录可以将该目录下的文件保留最新的版本。
11.安装style-loader,css-loader,处理css文件。
安装命令 cnpm i style-loader
css-loader –save-dev
12.处理js,sass,less的格式方法都和css类似，如
module:{
rules:[
{
test:/.css$/,
use:[
'style-loader',
{
loader:'css-loader', options:{modules:false,importLoaders:1}
},
{
loader:'postcss-loader',
options:{
plugins:[
require('autoprefixer')({
browsers:['last 5 version']
})
]
}
}
]
}
]
}
13.如果让css自动加上浏览器前缀，还要安装postcss-loader, autoprefixer。（此时最好去掉publicPath，如果不在正式环境下的话）