一、什么是webpack:
webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
注意： 目前最新为webpack2.0版本，与1.0有一些出入
二、初始化项目
npm init npm install webpack --save-dev
三、安装loader，stylus以及postCss
npm install style-loader css-loader stylus-loader stylus --save-dev npm install --save-dev postcss-loader autoprefixer
四、目录结构大致如下
五、添加webpack.config.js 配置如下：
// 该配置基于webpack2.0 详情查看 https://webpack.js.org/guides/migrating/ const path = require('path'); // 导入路径包 module.exports = { entry: './src/main.js', //入口文件 output: { path: path.resolve(__dirname, 'build'), // 指定打包之后的文件夹 // publicPath: '/assets/', // 指定资源文件引用的目录，也就是说用/assests/这个路径指代path，开启这个配置的话，index.html中应该要引用的路径全部改为'/assets/...' // filename: 'bundle.js' // 指定打包为一个文件 bundle.js filename: '[name].js' // 可以打包为多个文件 }, // 使用loader模块 module: { /* 在webpack2.0版本已经将 module.loaders 改为 module.rules 为了兼容性考虑以前的声明方法任然可用， 同时链式loader(用!连接)只适用于module.loader， 同时-loader不可省略 */ rules: [{ test: /\.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { // modules: true // 设置css模块化,详情参考https://github.com/css-modules/css-modules } }, { loader: 'postcss-loader', // 在这里进行配置，也可以在postcss.config.js中进行配置，详情参考https://github.com/postcss/postcss-loader options: { plugins: function() { return [ require('autoprefixer') ]; } } } ] }, { test: /\.styl(us)?$/, use: [ 'style-loader', 'css-loader', { loader: "postcss-loader", options: { plugins: function() { return [ require('autoprefixer') ]; } } }, 'stylus-loader' ] }] } }
在index.html中引入'/build/main.js'。main.js 代码如下
require('./common/css/style.css'); require('./common/css/stylus.styl');
六、通过webpack-dev-server实现页面的自动刷新。
首先安装webpack-dev-server
npm install --save-dev webpack-dev-server
然后修改package.json配置文件中：
"scripts": { "start": "webpack-dev-server", "build": "webpack" }
使用npm start 启动服务。npm的 start是一个特殊的脚本名称，它的特殊性表现在，在命令行中使用npm start就可以执行相关命令，如果对应的此脚本名称不是start，想要在命令行中运行时，需要这样用npm run {script name} ，所以打包命令修改为npm run build 。
这里如果使用webpack-dev-server 命令来启动就必须全局安装 devServer:
npm install webpack-dev-server -g
在webpack的配置文件中可以对devServer进行配置
// 配置devServer各种参数 devServer: { contentBase: "./", // 本地服务器所加载的页面所在的目录 historyApiFallback: true, // 不跳转 inline: true // 实时刷新 }
此时可以监听入口文件的改变，实时刷新页面，然而非入口文件的改变则不会被监听到，需要手动进行刷新。并且目标文件不包括index.html。这里使用html-webpack-plugin插件。
npm install html-webpack-plugin --save-dev
修改webpack配置文件，添加以下配置：
... const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { ...., plugins: [ new HtmlWebpackPlugin({ template: './index.html' // 模版文件 }) ] }
这里记录一下遇到的坑：首先，devServer其实读取的是打包之后的文件，但是这些文件是存储在内存当中（并不会显示在build下）。然后由于使用HtmlWebpackPlugin这个插件，它可以自动帮你将打包的js插入模版html文件中，因此我们要将原文件（就是作为模版的index.html文件）中插入的main.js这行代码去掉。然后如果开启了publicPath这个选项，HtmlWebpackPlugin会插入publicPth选项的路径（'/assets/main.js'），devServer的index.html此时是无法读取到该目录下的文件。但是奇怪的是devServer此时直接没有插入该scripts。。不知道为啥。。但是为了部署的问题，cdn啥的，对开发环境和生产环境应该开启不同的publicPath，也就是说开发和生产应该使用两个不同的配置文件（包括sourcemap，devserver都不应该出现在生产的配置中）。
七、sourcemap 让开发更易于调试
module.exports = { devtool: 'eval-source-map',//配置生成Source Maps，选择合适的选项 .... } }
八、使用ES6语法