有输入必须有输出，今天就来输出一下学习webpack的过程。
不得不先吐槽一下，比起可爱的grunt和好用的gulp，对webpack真心爱不起来！
还有一个血的教训：千万不要偷懒，有问题直接去官网。。。
本文旨在记录学习webpack的过车和遇到的问题，适合对node和webpack基础知识有些了解的开发人员，不会详细到记录操作命令；还有些问题无解，还请高手指教。
首先贴上搭建时候各种包的版本，毕竟webpack每次升级兼容性都不太好
操作系统：windows 10；node：v8.9.4
搭建步骤
1、安装webpack，webpack-cli，webpack-dev-server html-webpack-server （webpack-cli在4.x的版本中已经被抽离，这里需要再安装一下）；
对应配置：
a、在package.json的scripts中配置启动server的命令。
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‘) ???????}) ????]}2、配置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‘ ???}}3、其他插件配置
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‘ ???????????????} ???????????} ???????] ???}}
webpack4.x学习笔记
原文地址：https://www.cnblogs.com/solaZhan/p/8945236.html