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"] }, ] }