module.exports = { mode: 'development', entry: [ './src/index.js', './src/a.js' ], output: { filename: 'build.[hash:8].js', // 注意这个位置必须是绝对路径 path: path.join(__dirname, 'dist') } }
3、多入口多出口多模板的模式
1.入口文件与出口文件的配置
module.exports = { mode: 'development', entry: { index: './src/index.js', a: './src/a.js' }, output: { filename: '[name].[hash:8].js', path: path.join(__dirname, 'dist') } }
2.模板的配置(需要注明输出文件的名字)
... plugins: [ new CleanWebpackPlugin(['./dist']), new HtmlWebpackPlugin({ filename: 'index.html', // 注明打包后的文件名 template: './src/index.html', title: 'webpack测试1', hash: true, chunks: ['index'] // 注明选择哪个js文件 }), new HtmlWebpackPlugin({ filename: 'a.html', template: './src/index.html', title: 'webpack测试2', hash: true, chunks: ['a'] }) ], } ...
六、webpack热更新的使用
1、根据上面的方式我们可以实现,修改js代码浏览器会刷新,但是是类似我们人工的刷新(如果是有状态机的数据的时候会丢失数据)
2、我们可以使用webpack自带的一个热更新的插件
3、使用方式
1.在webpack.config.js中配置
const webpack = require('webpack'); ... plugins: [ new webpack.HotModuleReplacementPlugin(), ... ] ...
2.在主要的入口index.js文件中加上
if (module.hot) { module.hot.accept(); }
七、配置加载css样式的
webpack默认是支持js的,对于别的css或者typescript必须要安装加载器
1、安装包
npm install style-loader css-loader less less-loader -D
2、在webpack.config.js中的module配置规则(use中是一个数组,从后面解析到前面)
... module: { rules: [ { test: /\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' } ] }, { test: /\.less$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'less-loader' }, ] } ] }, ...
3、在src中创建一个css的文件夹,里面创建a.css和b.less文件
4、在index.js中引入样式文件
import './css/a.css'; import './css/b.less';
5、启动服务,查看浏览器Elements栏
八、抽取成单独的一个样式文件
上面的方式虽然可以加载样式文件,但是加载出来的全部的以<style type="text/css">....</style>的方式到页面中,增加了js文件的体积,如果项目大,可能会造成js文件过大加载慢,甚至加载不出的弊端。
1、抽取单独的css目前主要有2个包可以选择
使用插件extract-text-webpack-plugin@next
使用插件mini-css-extract-plugin(今后取代上面那个插件的包)
2、安装包
npm install extract-text-webpack-plugin@next mini-css-extract-plugin -D
3、使用extract-text-webpack-plugin@next插件的方式
1.引包
const ExtractTextWebpackPligin = require('extract-text-webpack-plugin');
2.修改module中的加载器
module: { rules: [ { test: /\.css$/, use: ExtractTextWebpackPligin.extract({ use: [ { loader: 'css-loader' } ] }) }, { test: /\.less$/, use: ExtractTextWebpackPligin.extract({ use: [ { loader: 'css-loader' }, { loader: 'less-loader' } ] }) } ] }, ...
3.使用插件