有输入必须有输出，今天就来输出一下学习webpack的过程。
css
不得不先吐槽一下，比起可爱的grunt和好用的gulp，对webpack真心爱不起来！html
还有一个血的教训：千万不要偷懒，有问题直接去官网。。。node
本文旨在记录学习webpack的过车和遇到的问题，适合对node和webpack基础知识有些了解的开发人员，不会详细到记录操做命令；还有些问题无解，还请高手指教。webpack
首先贴上搭建时候各类包的版本，毕竟webpack每次升级兼容性都不太好git
操做系统：windows 10；node：v8.9.4github
搭建步骤web
一、安装webpack，webpack-cli，webpack-dev-server html-webpack-server （webpack-cli在4.x的版本中已经被抽离，这里须要再安装一下）；npm
对应配置： element-ui
a、在package.json的scripts中配置启动server的命令。json
b、在webpack.config.js中配置入口，出口，以及server；
有关server的更多配置参数请参考 https://webpack.js.org/configuration/dev-server/#src/components/Sidebar/Sidebar.jsx
c、配置html-webpack-plugin，在编译后的文件夹自动生成一个html，而且已经添加了编译后的入口js；
配置后webpack.config.js：（这时候咱们就能够直接用 npm run dev 来启动服务了。）
const webpack = require('webpack'); const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry:{//入口文件，这里能够配置多个入口
main: path.resolve(__dirname,'src/module/index/main.js'), //plugin: path.resolve(__dirname,'src/plugin/plugin.js')
}, output: {//打包后文件位置以及文件名
path: path.resolve(__dirname,'dist'), filename: '[name].js' }, devServer: {//server配置
contentBase: path.join(__dirname,"dist"), //服务指向的文件夹
port: 9000,//端口号
inline: true,//自动刷新模式配置为inline
open: true, //是否自动打开页面
proxy: { //代理配置
"/dist": { target: "http://localhost:3000", pathRewrite: { "^/api": "" }, bypass: function(req, res, proxyOptions){ //代理过滤函数
return "" } } } }, plugins: [ new HtmlWebpackPlugin({ //配置生成新html的源html
template: path.resolve(__dirname,'src/index.html') }) ] }
二、配置loader
a、安装js处理包：babel-loader babel-ccore babel-preset-env并配置
babel-preset-env 能够根据配置的env只编译那些还不支持的特性，详情请参考https://github.com/babel/babel-preset-env
{ test: /\.js$/, use: { loader: 'babel-loader', options: { presets: ['env'], cacheDirectory: true //配置容许缓存，加快编译速度 } } }
b、安装css处理包 node-sass sass-loader（代码中使用sass，less的配置跟sass同样，只要安装less对应的处理插件便可）
安装css分离处理插件 extract-webpack-text-plugin，把css样式从html页面摘出来放到单独的文件中
sass-loader 依赖于 node-sass，因此这里不要忘记安装 node-sass；
首先引入extract-webpack-text-plugin，并new出两个对象来，分别处理css和less，传参为处理后样式的保存路径：
const ExtractTextPlugin = require("extract-text-webpack-plugin"); const extractCss = new ExtractTextPlugin('css/[name].css'); const extractLess = new ExtractTextPlugin('css/[name].css');
module中配置loader的rules：
{ test: /\.scss$/, use: extractLess.extract(["css-loader","sass-loader"]) }, { test: /\.css$/, use: extractCss.extract({ fallback: "style-loader", use: "css-loader" }) },
plugins里添加extractCss和extractLess插件：
plugins: [ new HtmlWebpackPlugin({ template: path.resolve(__dirname,'src/index.html') }), extractCss, extractLess ]
c、img，字体等文件loader安装配置 url-loader file-loader
注意：文档里介绍url-loader是基于file-loader封装的支持更多配置的loader，可是经测试发现，url-loader并不能单独使用，须要同时安装file-loader才可
哪位同窗若是知道缘由还请留言，先感谢！
{//加载图片loader配置
test: /\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options: { limit: 8192 //大小限制
} } ] }, {//加载字体等loader配置
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, use:{ loader: 'file-loader' } }
三、其余插件配置
uglifyJsPlugin，这个插件在4.x的版本中，也已经被独立出来，须要单独安装才能使用。
关于模块热加载的开启，官方文档中给出多种实现，这里给出使用devServer实现方式的测试：
其余实现方式详情参考 https://doc.webpack-china.org/guides/hot-module-replacement
在devServer 中设置 hot: true，在plugins中添加webpack.HotModuleReplacementPlugin();
测试结果：
修改html文件：浏览器打出HMR字样的提示，可是页面并无变化：
修改js文件：编译后页面彻底刷新；
当我打算继续配置多入口多页面时，居然发现我只能循环调用 html-webpack-plugin来生成html；
到目前位置，webpack给个人感受就是编译速度慢，文档介绍不清晰以致于奇奇怪怪的bug一个又一个，这些感觉大概是由于学习不够深刻，不够细致。
最后，贴出package.json和webpack.config.js
{ "name": "webpackOnly", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.4", "babel-preset-env": "^1.6.1", "css-loader": "^0.28.11", "extract-text-webpack-plugin": "^4.0.0-beta.0", "file-loader": "^1.1.11", "html-webpack-plugin": "^3.2.0", "node-sass": "^4.8.3", "sass-loader": "^7.0.1", "style-loader": "^0.21.0", "uglifyjs-webpack-plugin": "^1.2.5", "url-loader": "^1.0.1", "webpack": "^4.6.0", "webpack-cli": "^2.0.15", "webpack-dev-server": "^3.1.3" }, "dependencies": { "element-ui": "^2.3.6" } }
const webpack = require('webpack'); const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); const ExtractTextPlugin = require("extract-text-webpack-plugin"); const extractCss = new ExtractTextPlugin('css/[name].css'); const extractLess = new ExtractTextPlugin('css/[name].css'); module.exports = { entry:{//入口文件，这里能够配置多个入口
main: path.resolve(__dirname,'src/module/index/main.js'), plugin: path.resolve(__dirname,'src/plugin/plugin.js') }, output: {//打包后文件位置以及文件名
path: path.resolve(__dirname,'dist'), filename: '[name].js' }, devServer: {//server配置
contentBase: path.join(__dirname,"dist"), //服务指向的文件夹
port: 9000,//端口号
inline: true,//自动刷新模式配置为inline
open: true, //是否自动打开页面
hot: true, proxy: { //代理配置
"/dist": { target: "http://localhost:3000", pathRewrite: { "^/api": "" }, bypass: function(req, res, proxyOptions){ //代理过滤函数
return "" } } } }, plugins: [ new HtmlWebpackPlugin({ template: path.resolve(__dirname,'src/index.html') }), new UglifyJsPlugin({ uglifyOptions: { compress: false } }), new webpack.HotModuleReplacementPlugin(),//热加载插件
extractCss, extractLess ], module: { rules: [ { test: /\.js$/, use: { loader: 'babel-loader', options: { presets: ['env'], cacheDirectory: true //配置容许缓存，加快编译速度
} } }, { test: /\.scss$/, use: extractLess.extract(["css-loader","sass-loader"]) /*use: [{ //不使用css抽离的配置方式 loader: 'style-loader' },{ loader: 'css-loader' },{ loader: 'sass-loader', options: { includePaths: ["src"] } }]*/ }, { test: /\.css$/, use: extractCss.extract({ fallback: "style-loader", use: "css-loader" }) }, { test: /\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options: { limit: 8192 } } ] }, { test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, use:{ loader: 'file-loader' } } ] } }