webpack是什么就不用多说，它的地位也显而易见，今天我从零开始学习配置一下，以及和之前的配置方法做下简单的比较。（虽然之前没有配置过，但是也看过相关内容）。
准备工作
先创建一个新的项目，安装基本的环境以及webpack。
mkdir webpack-pro
cd webpack-pro
npm init -y
npm i webpack --save-dev
npm i webpack-cli --save-dev
这是我们可以在package.json文件中配置我们执行的命令，
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
入口与出口
此时我们运行npm run build其实就是执行了对应的webpack命令。但是发现报错了，说找不到./src/index.js。之前版本的配置中需要指定webpack的入口和出口，现在可以不必配置了，会默认把项目中./src/index.js当做入口，./dist/main.js当做出口。这时只需要我们手动创建入口文件就可以了。
console.log("test"); //随便写一行代码测试一下
这时再执行npm run build发现项目中生成了./dist/main.js文件。但是如果我就是不想使用默认入口和出口呢，我应该怎么做呢？可以在配置执行命令的时候明确指定出入口。
"build": "webpack ./src/app.js --output ./target/main.js"
把之前生成的文件删掉，入口文件改为app.js再执行一次命令。发现生成的是我们指定的路径了。
开发和生产环境
我们在使用npm安装包的时候，有时候要加--save-dev有时候只加--save。这其实就是在package.json区分环境。如果不指定默认就是生产环境。
"devDependencies": {
"webpack": "^4.28.2",
"webpack-cli": "^3.1.2"
},
"dependencies": {
"axios": "^0.18.0"
}
webpack4也引入了生产和开发两个模式，我们可以这样重新配置一下scripts来指定模式，
"scripts": {
"build": "webpack --mode production",
"dev": "webpack --mode development"
}
根据不同的环境执行不同的命令，会有不同的打包效果，我们分别测试一下，（我们就先改回使用默认的进出口文件）。
npm run dev
打包出来的文件代码是没有进行压缩的，适合我们开发过程中调试。而：
npm run build
打包出来的是进行压缩了的代码，体积更小，适合生产环境使用。
babel的配置
之前也写过一篇关于babel的文章（当然也是边学习边写，有错误的地方欢迎指出），这里babel的配置就不多说，主要看webpack的配置。
但目前为止我们还没有使用webpack的配置文件，这里我们就使用一下，当然首先要安装babel必须的包和进行基本的配置。
npm i @babel/core @babel/preset-env babel-loader --save-dev
在根目录添加.babelrc配置文件
{
"presets": ["@babel/preset-env"]
}
1. 配置文件
接下来我们就可以创建一个webpack的配置文件了webpack.config.js。这里指定对除了/node_modules目录下的js文件使用babel-loader进行编译。
module.exports = {
module: {
rules: [
{
test: '/.js$/',
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
};
我们在入口文件中写个ES6的语法试一下：
const arr = [1, 2, 3];
执行npm run dev成功后查看目标文件中已经被转换成ES5的语法：
eval("var arr = [1, 2, 3];\n\n//# sourceURL=webpack:///./src/index.js?");
2. scripts配置
其实指定使用特定的loader进行打包也可以在package.js的scripts中配置，但是这样命令就会越来越复杂，一些配置还是放在配置文件更好一些。
"dev": "webpack --mode development --module-bind js=babel-loader"
配置React项目
我们只需要在之前配置的基础上添加一些配置就可以了，这里需要安装@babel/preset-react来进行react语法的转换，在.babelrc中进行配置：
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
之前都还只是对js文件的编译，当然还需要一个对html文件编译的插件和loader，我们来下载一下：
npm i html-webpack-plugin html-loader --save-dev
这时重新对webpack配置文件进行配置，如果使用的jsx扩展，在配置loader的时候，多添加一个jsx匹配项就好了。然后我们配置html文件对应的插件和loader。
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: { minimize: true }
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: './index.html'
})
]
};
配置完成，我们来创建react的文件来测试一下：
.src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
App.js
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
return (
<div>
<p>React Test</p>
</div>
);
};
export default App;
ReactDOM.render(<App />, document.getElementById('app'));
./src/index.js
import App from './App';
现在我们执行npm run dev看下效果，发现自动生成了./dist/index.html，而且此文件中自动引入了./dist/main.js脚本，根本不需要自己在html文件引用。我用浏览器查看生成的页面，react组件的内容显示出来了。搞定！
CSS配置
前面html和js都用到了，当然不能少了css文件的编译，同样的我们需要下载相关的插件和loader。
npm i mini-css-extract-plugin css-loader --save-dev
然后我们创建一个css文件，并且在在入口文件中引用它（记得给html标签加title类）。
./src/index.css
.title {
font-size: 30px;
}
./src/index.js
import App from './App';
import style from './index.css';
最后我们在配置文件中配置一下，和刚才html的配置基本类似：
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
...
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
....
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
})
]
我们再次运行npm run dev，打包出来的html文件引入了对应的目标css文件，浏览器查看，样式生效。
开发自动化
经过前面的一些亲自测试，所有结果都没有什么问题了，But，每次修改文件之后都要重新打包，然后还得手动刷新浏览器，这些工作其实都可以实现自动化，这里用到webpack dev server。下载同之前一样，命令就不写了。
下载完成之后，我们这时再次回到package.json文件进行配置：
"dev": "webpack-dev-server --mode development --open"
我们把之前的webpack命令换成了webpack-dev-server，此时就相当于给我们的项目创建了一个服务，并实现了代码热更新，我们在浏览器访问http://localhost:8080即可查看页面效果。我们修改一下页面代码（比如加一行字），保存之后浏览器自动刷新，效果呈现。
--open参数就是在我们执行完npm run dev之后，自动帮我们打开浏览器访问http://localhost:8080。更多配置可以去查看具体的使用文档。
网友评论