引言
早期很多时候看 webpack，都是局限于看看基础的配置，例如 entry、ouput、rules 等等，自己着手配置也仅仅只是 less-loader 之类的。所以，作为前端求学者，从今天起，开始探索 webpack 奇妙的世界，有兴趣的同学可以一起坚持学习。
项目准备
- 初始化一个基础项目
npm init
- 创建最基础的几个文件用于后续构建使用
|-- node_modules
|-- index.html # 用于展示页面
|-- index.js # 页面对应的 JS
|-- index.css # 页面对应的 CSS
|-- main.js # 项目入口文件
|-- webpack.config.js # webpack 构建配置
|-- package.json
|-- package-lock.json
- 安装 webpack、webpack-cli、webpack-dev-server
npm i -S-D webapck webpack-cli webpack-dev-server
- 然后，我们需要安装要用到的 loader、plugin
npm i -S-D css-loader extract-text-webpack-plugin html-webpack-plugin optimize-css-assets-webpack-plugin
初次接触配置的同学，可能对上面的 loader 和 plugin 不太熟悉，我们来一一认识一下：
- css-loader 用于构建时解析项目中的 css 文件
- extract-text-webpack-plugin 用于将项目的的 css 文件提取出来，成为一个单独的 css 文件
- html-weback-plugin 当项目中存在 html 文件时，它会把 html 根据当前的依赖关系构建成一个新的 html 文件，例如在其中 link 打包好的 css 文件、script 打包后的 js 文件等等
- optimize-css-assets-webpack-plugin 由于 webpack 4 之后不支持 css-loader 写 url querying 的形式压缩 css，所以需要使用这个插件将 css 进行压缩
配置编写
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack test demo</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
index.css
#app {
text-align: center;
color: #faa;
}
index.js
function sayHi(words) {
document.getElementById('app').innerText = 'Hi ' + words;
}
module.exports = sayHi;
main.js
require('./index.css');
const sayHi = require('./index.js');
sayHi('webpack');
webpack.config.js
const path = require('path')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 项目入口文件
entry: './main.js',
output: {
// 把所有依赖的模块合输出到 bundle.js 文件
filename: 'bundle.js',
// 打包输出文件放到 dist 目录下
path: path.resolve(__dirname, './dist')
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new ExtractTextPlugin({
filename: `[name]_[md5:contenthash:hex:8].css`
}),
new HtmlWebpackPlugin({
template: './index.html'
}),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.css$/g, // 匹配资源文件名
cssProcessor: require('cssnano'), // 压缩优化的css处理器
cssProcessorPluginOptions: { // css 处理器的配置项，具体可查看相对应 css 处理器的文档
preset: ['default', {discardComments: {removeAll: true}}]
},
canPrint: true
})
]
}
package.json（主要是编写 npm scripts 来定义指令运行对应 shell 命令）
{
...
"scripts": {
"start": "webpack-dev-server --watch --hot --devtool source-map",
"build": "webpack --config webpack.config.js"
},
...
}
在这个 npm scripts 中，start 用于本地开启 devserver 运行项目，build 用于打包项目文件输出到 build。
webpack-dev-server shell 参数：
- –watch 代表监听本地文件系统，当文件系统发生变化时会自动刷新项目
- –hot 既热重载，当项目中所依赖的文件发生变化时，通过更新变化的部分，而不是刷新页面的形式更新变化
- –devtool source-map 则用于当我们需要 debugger 代码的时候，调试项目源码，而不是调试打包后难以阅读的代码
项目启动
在该项目下，打开终端，输入前面在 npm scripts 中定义的指令则可以运行或打包我们的项目，例如：
npm run start # 启动项目
npm run build # 打包项目
目前这个项目已经上传到我的 GitHub 上了，有兴趣的同学可以自行去 Clone
扫一扫
493
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
