Lidong's blog

Webpack 使用

初始化项目

1
npm init -y

安装 webpack-cli webpack

1
npm install -D webpack-cli webpack
1
yarn add --dev webpack-cli webpack

创建 src 目录,并在 src 目录中创建 index.js 文件,在 package.json中编写 script "build":"webpack" ;此刻运行 npm run build 即可将 src/index.js 编译生成 dist/main.js

此时的目录结构为

1
2
3
4
5
6
7
8
.
├── dist
│ └── main.js
├── node-modules
├── package.json
└── src
├── index.html
└── index.js

使 javascript 自动插入到 HTML 中

1
npm install -D html-webpack-plugin html-loader
1
yarn add --dev html-webpack-plugin html-loader

创建 webpack 配置文件 webpack.config.js

配置 loader

1
2
3
4
5
6
7
8
9
{
test: /\.html$/,
use: [{
loader: "html-loader",
options: {
minimize: true
}
}]
}

配置 html-webpack-plugin

1
2
3
4
new htmlWbpackPlugin({
template: "./src/index.html",
filename: "./index.html"
})

这时候,再运行 npm run build,src 中html、js 文件就会被编译转换后保存在 dist 目录中,并且 html 文件中通过 script 引用了 js 文件。

此时的目录结构为

1
2
3
4
5
6
7
8
9
10
.
├── dist
│ ├── index.html
│ └── main.js
├── node_modules
├── package.json
├── src
│ ├── index.html
│ └── index.js
└── webpack.config.js

使用 webpack-dev-server

1
npm install -D webpack-dev-server
1
yarn add --dev webpack-dev-server

package.json 中编写 script "dev":"webpack-dev-server";此刻运行 npm run dev 即可启动 webpack-dev-server,热加载运行,修改src目录中文件,即刻在页面中显示出效果。

编译 javascript

1
npm install -D @babel/core babel-loader @babel/preset-env
1
yarn add --dev @babel/core babel-loader @babel/preset-env

在 webpack.config.js 中

配置 babel-loader

1
2
3
4
5
6
7
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}

编译 sass

1
npm i -D node-sass style-loader css-loader sass-loader mini-css-extract-plugin
1
yarn add --dev node-sass style-loader css-loader sass-loader mini-css-extract-plugin

在 webpack.config.js 中

配置 sass、css 相关的 loader

1
2
3
4
5
6
7
8
{
test: /\.scss$/,
use: [
"style-loader",
"css-loader",
"sass-loader"
]
}

⚠️ 配置 loader 是有顺序的,webpack 从后往前读取 loader ,也就是说这里 loader 是,scss 文件,先通过 sass-loader 处理,再通过 css-loader 处理,最后通过 style-loader 处理

配置 mini-css-extract-plugin

1
2
3
4
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})

处理文件

1
npm install -D file-loader
1
yarn add --dev file-loader

配置 file-loader

1
2
3
4
5
6
{
test: /\.(jpg|png|gif|svg)$/,
use: [
"file-loader"
]
}

项目地址:https://github.com/ryanlid/webpack-start
示例:https://webpack-start.lidong.me
文档说明:https://lidong.me/blog/webpack-start

更新记录

  1. 2019/3/22 20:15:33 首次发布

参考链接

本文链接:


评论内容还在加载中。。。
如无法加载,请将域名 disqus.com 和 disquscdn.com 加入到你的代理规则中