开始 webpack 之旅
npm install webpack --save-dev
这里如果没有指定 -g
全局安装,那么需要调用 node_modules
下的 webpack.js
来执行,因为非全局安装没有添加环境变量
尝尝鲜,做点 webpack
必须的第一步:编写 webpack.config.js
// webpack.config.js
module.exports = {
// 两个必须参数:
entry: '', // 入口文件,写路径即可
output: { // 打包后文件,有两个参数:
filename: '', // 文件名,'[name]'表示使用原名,'[hash]'使用哈希值
path: '', // 文件夹路径,对着官方敲,path.resolve(__dirname, '文件夹名'),需先导入
publicPath: '', // 上线地址,例如 http://ningtaostudy.cn
},
};
现在碗和米饭有了,怎么端起来吃呢
直接在命令行运行 webpack,再加点料:
webpack \
--display-reasons \
--progress \
--colors \
--display-modules \
--config # webpack 配置文件名(换个碗吃饭)
在 npm 脚本里写指令(偷懒让别人帮你盛饭),接着命令行里运行 npm run webpack
:
{
"scripts": {
"webpack": "webapck --progress --colors"
}
}
饭吃到了,没有菜(webpack 插件)怎么行呢
打包 html 的插件 html-webpack-plugin
。惯例第一步 npm install
,接着在 webpack.config.js
里配置插件,有了 entry
和 output
出头鸟,我们知道该写一个 plugin 了:
// webpack.config.js
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new htmlWebpackPlugin({
filename: '[name]-[hash].html',
template: 'index.html',
inject: 'head',
kill: 'bill',
}),
],
};
让我们来品品小当家的菜:
-
filename
很好,不就入口文件吗 -
template
你不用说,我知道是模板,相对于配置文件的路径 -
inject
我就不遵从开发最佳实践,就要在head里加载js文件,打我呀 kill
杀死比尔,纯属虚构。这是自定义的模板,模板里调用,下面举个栗子:<!-- index.html --> <!-- template 里的文件是 index.html,使用自定义模板来确定标题 --> <title><%= htmlWebpackPlugin.options.kill %><title> <!-- 转化后 --> <title>bill</title>
上面代码一样一样的。老夫斗胆说一句,这里模板引擎类似 jsp,但还是 js 语法
去官网看看 小当家
来瓶酒(loaders)吧,生活美滋滋
loader 用来加载资源文件,诸如图片、css之类的,这样我们就可以在 .js
里导入 css,你没听错,用起来我也没有在蒙你
最简单常用来加载 css 的两个 loader:
npm install style-loader css-loader --save-dev
# style-loader 用来插入 style 标签
# css-loader 用来加载 css 代码,此 loader 居下
话不多说,开车:
// webpack.config.js
module.exports = {
modules: {
rules: [
{
test: /.css$/,
use: [
'style-loader',
'css-loader',
],
},
],
},
};
看起来嵌套挺多的哈,不过很简单。modules
下的 rules
包含很多匹配规则(正则表达式),每一条代表加载什么类型的资源文件,上面写的就是加载 .css
样式文件,并使用 style-loader
和 css-loader
加载。
现在问题来了,我想喝瓶茅台(自动添加浏览器产商前缀)。没问题,强大的 webpack 生态圈给你提供了 postcss-loader
,一个更高大上的 loader。这个时候我们都知道只需要改一下 use
数组:
[
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1
},
},
'postcss-loader'
]
数组的项可以是对象,这样我们的 loader 就能带 options
里的参数,等同于:
use: 'style-loader!css-loader?importLoaders=1!postcss-loader'
至于为什么要带这样的参数,这是因为一个
@import
引发的血案
webpack-dev-server 大厨来也
我是谁,我从哪里来,我又该到哪里去
日益繁重的前端工作下,没有人能阻挡我们偷懒的步伐。。webpack 只是一个打包工具,即使我们能带 --watch
自动编译,但浏览器还得手动刷新(心中一个卧槽,尼玛还有这种操作,曾经学习的一年里自己起码动手刷新浏览器点了 10000 次,忍不住吐槽浏览器刷新按钮就不能做一个浮动的吗,还得移动大半个屏幕,我鼠标少说走了 1000m 了)。很好,在灵长类动物面前都不是问题:
npm install webpack-dev-server -D # 这个不是重点,缩写而已
接下来配置 webpack,其实官网很详细了,还带中文的,比个赞
// webpack.config.js
module.exports = {
devServer: {
contentBase: './dist', // 根目录,就像 apache 的 www 文件夹
},
};
然后呢卧槽?没错,好了,输入吧肿瘤君:
webpack-dev-server --open
偷懒神(package.json
)在此:
{
"scripts": {
"start": "webpack-dev-server --open --color"
}
}
再运行 npm start
,这次连 run
都省了,,,
好了,以上就是初步了解 webpack 了,再总结一下吧
配置项一览:
// webpack.config.js
module.exports = {
entry: '',
output: {},
module: {
rules: [],
},
plugins: [],
devServer: {},
devtool: 'inline-source-map', // 开发环境下调试专用,快速定位错误文件位置
};
常用 loader:
- 加载 html:
html-webpack-plugin、html-loader
- 加载 css:
style-loader、css-loader、sass/less-loader
- 加载 es6:
babel-loader
- 加载图片、json 等文件:
file-loader、url-loader(转base64)、image-loader(压缩)、json-loader
上面的这些 loader 都可以去 npmjs 官网 上查看详细的配置
-loader
在 webpack 2+ 不能省略;html 插件和 loader(加载模板)不能混着用