用了挺久的vue搭配webpack开发项目，一直没有写webpack相关的笔记，所以有时候遇到相同问题无从下手，今天抽空就记录一下，方便以后回头查看。
1. 创建配置文件，设置输出文件
// webpack.config.jsmodules.exports = { // entry源文件，output输出文件 entry: './src/app.js', output: { filename: './dist/app/bundle.js' }}复制代码 // package.json 改造下script部分"scripts": { "dev": "webpack -d --watch", "prod": "webpack -p"}复制代码 2. 生成html文件
npm install html-webpack-plugin --save-dev 安装插件复制代码
修改webpack.config.js文件,之后在src目录下新建index.html文件
let HtmlWebpackPlugin = require('html-webpack-plugin');moudle.exports = { .... plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })]}复制代码 接着运行会看见html文件显示出来
3. 使用loder处理CSS和SASS
loader对于将scss转换为css，允许直接在js文件中import css文件等..
npm install --save-dev css-loader style-loader // 安装插件复制代码
loader处理css文件，更新webpack.config.js
module: { ... rules: [ { test: '/\.scss$', use: ['style-loader', 'css-loader'] } ]}复制代码 新建 src/app.scss 并加入以下内容
body { background: red;}复制代码 src/app.js
import css from './app.scss'console.log('halo')复制代码 最后就能看到运行成功的css样式嵌套在html中
改用sass-loader把sass编译成css[sass只是一种更好的语法来写css]
npm install sass-loader node-sass --save-dev // 安装loader复制代码
更新配置文件
rules: [ { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }]复制代码 更改 app.scss
body { background: blue; p { color: green; }}复制代码 上面两种方式都能运行成功，但是样式是嵌套的，需要使用插件分离成一文件，会把我们要的sass或者css处理好，放置到一个css文件中
npm install --save-dev extract-text-webpack-plugin复制代码
添加配置 webpack.config.js
const ExtractTextPlugin = require('extract-text-webpack-plugin');plugins: [ new ExtractTextPlugin('style.css')],module: { rules: [ { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'sass-loader'] }) } ]}复制代码 最后执行会发现dist目录下生成了一个style.css文件
4. 使用模块热
const webpack = require('webpack');devServer: { hot: true},plugins: [ new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin() ]复制代码 处理插件 extra-text-webpack-plugin
// 这个时候你改动内容会发现页面没有刷新改变，因为我们之前用来处理css的插件，在使用热更新的时候需要关闭new ExtractTextPlugin({ filename: 'style.css', disable: true})复制代码 这个时候重启运行就能实现热更新了。
5. 使用插件清除文件
这个插件是为了在生产环境编译环境时，把放置生产环境用的文件清除干净，重新生产新的。比如更新文件，之前文件处理掉，换成最新的
// 修改下出入口文件的配置entry: { "app.bundle": "./src/app.js"},// 出口文件名就会变成 app.bundle + hash值 + .jsoutput: { path: __dirname + "dist", filename: '[name].[hash].js'}复制代码 重新运行之后会发现 dist 目录下的js文件名带上hash值，这个hash值当你的src/app.js发生改变时，再运行就会多生成一个带hash的js文件。但是每次修改就会生成很多文件，但是我们只需要最新的就好，其他清空，所以需要用到 clean-webpack-plugin 插件实现
npm install clean-webpack-plugin复制代码
const CleanWebpackPlugin = require('clean-webpack-plugin');// dist 是我们要清除的文件夹名字，数组表示可以清除多个文件夹plugins: [ new CleanWebpackPlugin(['dist']),]复制代码 6. 区分生产环境和开发环境
extract-text-webpack-plugin生产环境下使用，开发环境不使用，我们要区分出来。
// mac的操作，在windows上会报错NODE_ENV不是内部或外部命令,也不是可运行的程序// package.json"scripts": { "dev": "webpack-dev-server", "prod": "NODE_ENV=production webpack -p"}复制代码 下面的是windows使用
npm install cross-env –save-dev // 先安装复制代码
"scripts": { "dev": "webpack-dev-server", "prod": "cross-env NODE_ENV=production webpack -p"}复制代码 webpack.config.js
// process.env.NODE_ENV能够得到之前设置的变量值 如果是生成环境 isProd为true 否则falseconst isProd = process.env.NODE_ENV === 'production'; // 使用环境变量复制代码
修改 extra-text-webpack-plugin插件代码
const cssDev = ['style-loader', 'css-loader', 'sass-loader'];const cssProd = ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'sass-loader']})const cssConfig = isProd ? cssProd : cssDev;module: { rules: [ { test: /\.scss$/, use: cssConfig } ]}const cssConfig = isProd ? cssProd : cssDev;new ExtractTextPlugin({ filename: "styles.css", disable: !isProd})// 开发环境热更新就不需要这个插件。复制代码 就简单写了一些，如果需要使用或了解更多，可以看官网。