本文主要分为：
环境配置
使用配置文件
CSS 处理
ES6 代码编辑
文件压缩
SASS 处理
CSS 与 JS 分离
文件处理 file-loader 与 url-loader
多入口及自动清理
客位看官可直接 ctrl + f 搜索对应关键字
环境配置
window + r，输入cmd打开命令行新建并进入
webpack-3.10.0文件夹mkdir webpack-3.10.0 && cd webpack-3.10.0
使用
sublime text3的subl.exe打开该文件夹
subl.exe
在
webpack-3.10.0目录下初始化操作，生成package.json文件npm init -y
也可以直接使用 npm init 来初始化 package.json 文件，但这样需要手动填写项目名之类的东西，加上 -y 表示使用默认配置
npm init -y
新建
src文件夹，今后将要打包的文件全部放入该文件夹下新建 src 文件夹
在
src下新建main.js并随便敲一点代码main.js
安装
webpacknpm install webpack@3.10.0 --save-dev
这里是安装指定版本号的 webpack，不加版本号则是最新版
安装完成
安装完成后的 package.json
package.json
安装完成后的项目目录
新增了 node_modules 目录
修改
package.json增加执行脚本语句
打包
# 命令语句 源文件 目标文件npm run start src/main.js dist/bundle.js
如果没有 dist 目录则自动新建
打包
打包结果
打包后
在
webpack-3.10.0目录下创建index.html文件，引入之前打包好的bundle.js文件
<!DOCTYPE html><html><head> <title>webpack-3.10.0</title></head><body> <h1>Hello World!</h1> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="dist/bundle.js"></script></body></html>
打包并引入成功
我们同样可以把打包的语句直接写在
package.json中，免得每次输入很麻烦"start":"webpack src/main.js dist/bundle.js"
image.png
这样我们在命令行中直接调用 npm run start 也能实现打包的效果
现在有个问题，当我们修改
main.js文件的内容时，刷新页面并不会显示更新的改动，如果想让页面同步的话，我们还需再执行一次npm run start语句，每次这样未免太麻烦，可以通过以下几种方式改善："start":"webpack src/main.js dist/bundle.js --watch",
# package.json"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start":"webpack src/main.js dist/bundle.js", "watch":"npm run start -- --watch"},方法二：新定义一个
watch命令，这种方式根据官方文档说明，由于调用的是之前自定义的npm run start命令，因此需要在--watch前额外添加--
方法一：修改
package.json中之前写好的start语句
package.json
以第二种方式为例：
监听成功
此时则监听成功，修改 main.js 保存则实时会在 bundle.js 中显示，页面中刷新即可展示；ctrl + c 终止监听。
实时监听
使用配置文件
为了看出效果，我们先把之前生成的
bundle.js文件删掉。在
webpack-3.10.0目录下创建webpack.config.js，并输入如下内容
# webpack.config.jsvar webpack = require("webpack");
module.exports = {
entry:'./src/main.js',
output:{
path:'./dist',
filename:'bundle.js'
}
}此时你的项目结构应该是这样的，dist 目录下 空空如也：
dist 目录下为空
跑一下试试
报错
原因是output中的路径需要是绝对路径absolute path在配置文件中引入
path模块解决绝对路径问题var webpack = require("webpack");var path = require("path");module.exports = { entry:'./src/main.js', output:{ path:path.resolve(__dirname,'./dist'), filename:'bundle.js' } }由于添加了配置文件，因此需要修改一下
package.json中的启动命令npm run start更改为如下（因为配置文件中已经设置了路径及文件名，因此不需要命令中再指定）"start":"webpack",
跑一下
跑跑
同样是创建了 bundle.js 文件
效果是一样的
CSS 处理
在
src目录下创建main.css# main.cssbody{ background: orange; }修改
main.js# main.jsrequire('./main.css')使用
npm run watch命令会报错缺少 loader
缺少loader，这里引用官网说明：
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。
处理
css需要安装一个css-loader的包：npm install css-loader --save-dev
安装成功
安装完成后需要在配置文件中进行处理，注意
module属性：
# webpack.config.jsvar webpack = require("webpack");var path = require("path");
module.exports = {
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'./dist'),
filename:'bundle.js'
},
module:{
rules:[{
test:/\.css$/, // 正则匹配 .css 后缀
use:'css-loader'
}]
}
}再跑一下
修改配置文件之后
看一下是否被打包到 bundle.js 中
bundle.js
可以看到 main.css 的样式的确被打包到 bundle.js 中了，但为什么浏览器中没有效果？
安装
style-loader
npm install style-loader --save-dev
修改配置文件，注意：
style-loader需要写在前面修改配置文件
再调用命令
npm run watch
样式已注入
将 ES6 代码编辑为所有浏览器通用的代码
将
main.js内容改为一段ES6的代码# main.jslet a = 11;const b = 22;class Foo{}直接调用
npm run watch会发现bundle.js中的代码依旧为ES6尚未安装 ES6
这时需要 Babel 这个工具
Babel 的作用就是将下一代的 JavaScript 语法转换为现今浏览器兼容的语句
首先安装
Babelnpm install --save-dev babel-loader babel-core
在
webpack.config.js中添加一条规则：{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }其中，
test用于判断扩展名为.js的文件，exclude表示不包括的文件。
添加规则后，此时的webpack.config.js文件应该是这样的添加规则
安装转换
ES2015及更高版本JavaScript语法的 env presetnpm install babel-preset-env --save-dev
在根目录
webpack-3.10.0下创建.babelrc文件，内容如下：{ "presets": ["env"] }
创建 .babelrc
OK，现在执行命令
npm run watch，可以看到我们之前main.js中的语句在bundle.js中已经成功转换成通用语句了main.js
bundle.js
本节内容可直接参考Babel官网：https://babeljs.cn/
文件压缩
文件压缩需要用
webpack的插件来实现，比如webpack自带一个BannerPlugin插件，用于添加顶部注释，首先在webpack.config.js中添加如下代码：plugins:[ new webpack.BannerPlugin('顶部注释插件') ]重新打包
npm run watch，成功后，bundle.js中顶部出现注释添加成功
webpack有个自带的插件UglifyJsPlugin用于压缩文件
plugins:[ new webpack.BannerPlugin('顶部注释插件'), new webpack.optimize.UglifyJsPlugin()
]重新打包后的 bundle.js
压缩后的 bundle.js
然而我们在开发调试阶段是不需要压缩代码的，因此需要对开发环境和线上环境做个区分，开发环境不压缩代码，线上环境才压缩
if(process.env.NODE_ENV === 'production'){ module.exports.plugins.push(new webpack.optimize.UglifyJsPlugin()) }如果是线上环境，则将
UngifyJsPlugin插件填入webpack的plugins中回到命令行调用命令
set NODE_ENV=production // 设置为生产环境， windows 系统npm run watch
切换线上环境并打包
我们可以直接在
package.json中添加脚本命令（我尝试了几种写法，发现只有这样是有效的，不知道为什么。此外，有时这样也不好用，需要在命令行中手动制定一次set NODE_ENV=production，之后调用npm run production就有效了）"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack", "watch": "npm run start -- --watch", "production":"set NODE_ENV=production && npm run watch", "development":"set NODE_ENV=development && webpack --watch"}
这样在命令行中通过 npm run development 即可切换为开发环境（代码不压缩），npm run production 就是生产环境（代码压缩）
开发生产环境切换
对
webpack.config.js简单做一下整理
var webpack = require("webpack");var path = require("path");var isProduction = process.env.NODE_ENV === 'production'module.exports = { entry:'./src/main.js', output:{ path:path.resolve(__dirname,'./dist'), filename:'bundle.js'
}, module:{ rules:[{ test:/\.css$/, use:['style-loader','css-loader']
},{
test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"
}]
}, plugins:[ new webpack.BannerPlugin('顶部注释插件'),
]
}if(isProduction){ module.exports.plugins.push(new webpack.optimize.UglifyJsPlugin())
}
作者：_我亦飘零
链接：https://www.jianshu.com/p/8a0979063b45
共同学习，写下你的评论
评论加载中...
作者其他优质文章
