已经习惯了直接用脚手架，快要忘记如何自己配置webpack了，今天，跟着网上的多篇教程，一步一步跟着走了一遍，很多事情似乎明朗了不少。
webpack的用途
webpack可以打包各种我们日常项目中需要用到的依赖包，并将其转化为浏览器认识的代码。webpack的工作方式是：指定一个入口文件，通过这个入口文件开始找，找到整个项目所有的依赖文件，最后打包为一个（或多个）浏览器可识别的JavaScript文件。
开始配置webpack4
1、首先在某个盘下创建一个文件夹，或者直接用命令行创建：
mkdir webpack-test && cd $_
2、npm初始化webpack-test，初始化成功后你的文件里会出现package.json文件:
npm init -y //-y是直接默认，不需要一遍遍的按回车
3、安装webpack和webpack-cli
npm i webpack webpack-cli --save-dev
4、设置package.json文件的scripts
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
}
此时可以在命令行运行npm run build，会发现有报错：
ERROR in Entry module not found: Error: Can't resolve './src' in '~/webpack-4-quickstart'
报错原因是因为没有找到入口文件，在老版本的webpack里，需要自己去指定入口文件以及出口文件，步骤是：在项目根目录下创建webpack.config.js文件，文件代码如下：
module.exports = {
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public", //打包后的文件存放的地方
filename: "bundle.js" //打包后输出文件的文件名
}
}
而在webpack4，你不需要在去指定入口文件和出口文件了，入口文件默认是根目录下src文件夹里面的index.js，文件打包后会默认生成dist文件夹，方便了很多。
开发模式和生产模式
在webpack的老版本中，我们需要自己在创建一个webpack.production.config.js文件，也就是说，开发模式一个文件，生产模式还要创建一个文件，但是在webpack4不在需要这样做了，我们可以在package.json文件中做如下修改：
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
}
如果想要修改入口文件和出口文件，可以在webpack.config.js里设置entry和output，也可以通过修改package.json文件达到同样的效果：
"scripts": {
"dev": "webpack --mode development ./webpack-test/app/main.js --output ./public/bundle.js",
"build": "webpack --mode production ./webpack-test/app/main.js --output ./public/bundle.js"
}
Babel
webpack通过各种loader去将文件转换成浏览器认识的代码，比如es6转成es5，react的jsx文件转成js，用到的loader都是需要自己安装的：
npm i babel-core babel-loader babel-preset-env babel-preset-react react-dom react --save-dev
安装完成后需要对webpack.config.js进行相应的配置：
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
}
接下来在src文件夹下创建一个App.js文件，可以在这个文件中写入jsx和es6的语法，测试webpack好不好用：
import React from "react";
import ReactDOM from "react-dom";
const App = () => {
return (
<div>
<p>React herfasd</p>
</div>
);
};
export default App;
ReactDOM.render(<App />, document.getElementById("app"));
在src/index.js中引入App，然后npm run build，在dist文件夹中打开index.html，不出意外，你能够看到“react herfasd”
截至目前为止，每一次更改都需要去dist下找到index.html文件，并且重新npm run build才能看到更改之后的效果，所以我们还缺一个webpack-dev-server：
npm i webpack-dev-server --save-dev
安装成功以后在package.json文件中做如下修改：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
}
这一次，只要更改文件，浏览器就会直接看到修改以后的效果，非常便于开发。
插件plugin
html、css
npm i html-webpack-plugin html-loader mini-css-extract-plugin css-loader --save-dev
注：mini-css-extract-plugin只适用于webpcak4.2以上的。
webpack.config.js配置如下：
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
}
自行增加css文件和html文件查看效果。
参考网址：https://juejin.im/post/5af934806fb9a07ab458bced#heading-7
网友评论