1.webpack的常规配置
先给出一个示例：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
core: ["react", "react-dom", "redux", "react-router","react-redux"],
main: './src/index.js'
},
devServer: {
contentBase: './dist',
port: 9000
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Development',
template: 'index.html'
})
],
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
}
},
{
test: /.css$/,
use: ['style-loader','css-loader']
},
{
test: /.less$/,
use: ['style-loader','css-loader',"less-loader"]
},
]
}
};
以上是一个非常简单的配置文档，主要做了以下几件事：
1.配合React框架将react依赖和入口文件分开打包成两个js文件，并命名为main和core，打包后输出。
// entry定义了webpack该从哪里开始编译，即入口。output定义了输出规则和目标文件夹。webpack允许多个入口和多个输出。 entry: { core: ["react", "react-dom", "redux", "react-router","react-redux"], main: './src/index.js' },
output: {
//这里生成文件名分别为core.js,main.js
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
2.配置了一个开发代理服务器，监听本地端口9000。
devServer: { devtool: 'source-map', //定义测试服务器的根目录位置 contentBase: './dist', //监听端口 port: 9000, //404时自动跳转到的文件 historyAPIFallback: { index: 'index.html' }
https: true,
compress: true,
allowedHosts: ['xxx.com', 'xx.com'] }
关于devtool的配置项参考以下链接：https://webpack.js.org/configuration/devtool/#devtool
3.设置了清除缓存插件，以及生成入口文件index.html。
plugins: [ //该插件会再重新编译的时候自动删除dist文件夹里面的缓存文件 new CleanWebpackPlugin(['dist']), //该插件可以在编译完成后自动生成一个index.html文件，并将生成的js文件插入为脚本，作为网站的入口。 new HtmlWebpackPlugin({ title: 'Development',
//此处定义index文件的模版，如果没有模版webpack就会自己生成。若有模版，则会在模版文件尾部插入生成的脚本。 template: 'index.html' }) ]
index.html模版文件内容参考：
<!DOCTYPE html> <html> <head> <title>Write App</title> </head> <body> <div id="root"></div> </body> </html>
打包编译完成后的index.html文件如下：
<!DOCTYPE html>
<html>
<head>
<title>Write App</title>
</head>
<body>
<!--渲染React组件需要root的div-->
<div id="root"></div>
<script type="text/javascript" src="core.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
4.为不同格式的文件设置不同的加载器，使用babel编译js，less编译样式文件。
module: { rules: [ { test: /.js$/, //需要排除掉node_modules文件夹里面的文件 exclude: /(node_modules)/, //此处定义babel处理器，另外需要配置.babelrc配置文件，参见babel官网说明 use: { loader: 'babel-loader', } }, { test: /.css$/, use: ['style-loader','css-loader'] }, { test: /.less$/, //如果使用了第三方样式框架，less文件需要编译，则需要使用less-loader use: ['style-loader','css-loader',"less-loader"] }, ] }