原文: A tale of Webpack 4 and how to finally configure it in the right way
一.初始配置
- 初始化项目
初始化后将在项目目录下生成一个
package.json
文件
mkdir webpack-4-tutorial && cd webpack-4-tutorial
npm init -y
- 添加webpack4
项目目录将会生成
node_modules
文件夹
npm install webpack webpack-cli --save-dev
此时的package.json为
{
"name": "webpack-4-tutorial",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.20.2",// 确保这里是webpack4
"webpack-cli": "^3.1.2"
}
}
- 修改package.json
在
scrpit
属性下修改配置,并配置开发和编译两个模式
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development", // 开发者模式
"build": "webpack --mode production"// 编译模式,默认模式
}
- 输入文件
创建一个
src
文件夹,并新建一个工程文件index.js
,内部代码为:
```javascript
console.log(`Hello Webpack4`);
```
- 测试是否成功
- 运行命令
开发模式
npm run dev
编译模式
npm run build
- 注意
- 编译后会自动创建
dist
文件夹并生成main.js
文件,而且我们可以发现build
模式编译后的文件比dev
模式小得多。 - webpack4相比之前版本为用户配置了默认的入口文件(
./src/index.js
)以及默认的输出(./dist/main.js
)。
默认配置可在package.json
里修改:
"scripts": { "dev": "webpack --mode development ./src/index.js --output ./dist/main.js", "build": "webpack --mode production ./src/index.js --output ./dist/main.js"
- 编译后会自动创建
二.增加ES6支持
若要支持ES6,则需要babel去转换它
- 安装
babel
等相关插件
不同环境版本要求不同,编译时可能会出错,可根据提示改变版本
npm install babel-core babel-loader babel-preset-env --save-dev
npm install babel-core babel-loader@7 babel-preset-env --save-dev
- 配置
babel
在项目目录下新建
.babelrc
文件,写入如下内容
{
"presets": ["env" ]
}
- 配置
babel-loader
插件
项目下新建一个
webpack.config.js
,加入如下基础配置
// webpack v4
const path = require('path');
module.exports = {
entry: { main: './src/index.js' },// 入口文件配置
output: {// 输出配置
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
module: {// 规则设置
rules: [
{
test: /\.js$/,// 匹配所有js文件
exclude: /node_modules/,// 不包括node_modules文件夹
use: {
loader: "babel-loader"// 插件
}
}
]
}
};
npm run dev
、npm run build
编译正常即成功
三.增加HTML和CSS支持
CSS
src
文件夹下新建style.css
div {
color: red;
}
- 在
dist
文件夹下新建一个index.html
的文件
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>Hello, world!</div>
<script src="main.js"></script>
</body>
</html>
src
中index.js
引入css文件
import "./style.css";
console.log(`Hello Webpack4`);
- 安装CSS插件
webpack只会辨别js.这里需要通过extract-text-webpack-plugin获取css文本进行压缩。而Webpack4则不再使用此插件而是mini-css-extract-plugin
npm install --save-dev mini-css-extract-plugin
npm install style-loader css-loader --save-dev
- 配置css的规则
打开
webpack.config.js
// webpack v4
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");//新增
module.exports = {
entry: { main: './src/index.js' },
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
],//新增
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
},
"css-loader"
]
},//新增CSS规则
]
}
};
npm run dev
编译成功后dist
自动生成mian.css
文件
HTML
src
下新建一个index.html
文件
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>Hello, world!</div>
<script src="main.js"></script>
</body>
</html>
- 安装html插件
npm install html-webpack-plugin --save-dev
- 修改
webpack.config.js
// webpack v4
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');// 新增
module.exports = {
entry: { main: './src/index.js' },
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
new HtmlWebpackPlugin({
inject: false,
hash: true,
template: './src/index.html',
filename: 'index.html'
})// 新增
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
},
"css-loader"
]
},
]
}
};
- 基础配置测试
删除
dist
文件夹并运行npm run dev
命令,将重新自动创建dist文件夹以及html、css、js文件