webpack4

1 { 2 test: /\.(png|jpg|gif)$/, 3 // use: 'file-loader' 4 use: { 5 loader: 'url-loader', 6 options: { 7 limit: 1, 8 // 设置输出文件夹 9 outputPath: '/img/', 10 // 设置公共的路径 11 // publicPath: 'http://www.itlike.com' 12 } 13 } 14 }, new MiniCssExtractPlugin({ filename: 'css/main.css' }), 1 output: { 2 filename: 'bundle.[hash:8].js', 3 path: path.resolve(__dirname, 'dist'), 4 publicPath: 'http://www.itlike.com' 5 }, 1 const path = require('path'); 2 const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 4 module.exports = { 5 mode: 'production', 6 // 多入口 7 entry: { 8 index: './src/index.js', 9 two: './src/two.js' 10 }, 11 // 多出口 12 output: { 13 filename: '[name].[hash:8].js', 14 path: path.resolve(__dirname, 'dist'), 15 }, 16 plugins: [ 17 new HtmlWebpackPlugin({ 18 template: 'src/index.html', 19 filename: 'index.html', 20 chunks: ['index']//引入js 21 }), 22 new HtmlWebpackPlugin({ 23 template: 'src/two.html', 24 filename: 'two.html', 25 chunks: ['index','two'] 26 }) 27 ] 28 };

source.map

watch的使用可以减少我们每次保存后手动打包的繁琐情况，当代码发生变化，只要保存，webpack将自动为我 们进行打包。 和webpack-dev-server的区别是：一个是在内存中打包构建，一个是真实打包构建。

1 可以设置监控选项： 2 watch：ture 3 watchOptions:{ 4 poll: 1000, // 每秒监控多少次 5 aggregateTimeout: 500, // 防抖动，每500ms更新一次 6 ignored：/node_modules/, // 忽略监控哪些文件（一定要写） 7 }  clearWebpackPlugin 每次打包构建时都会清空dist目录，重新生成里面内容， 安装： npm install clean-webpack-plugin -D const { CleanWebpackPlugin } = require('clean-webpack-plugin’); new CleanWebpackPlugin()

还存在一些小插件

copyWebpackPlugin 概念：npm install copy-webpack-plugin -D 每次打包构建时都会把对应文件夹中文件的拷贝到打包后的文件夹中

bannerPlugin (webpack内置) 在打包的文件中写上注释 let webpack = require(‘webpack’);

1 plugins: [ 2 new HtmlWebpackPlugin({ 3 template: 'src/index.html', 4 filename: 'index.html' 5 }), 6 new CleanWebpackPlugin(), 7 new CopyWebpackPlugin([ 8 {from: 'copy', to: './'} 9 ]), 10 new webpack.BannerPlugin('Made By 撩课学院 YJH') 11 ]

跨域

1 proxy: { 2 // '/api': 'http://localhost:3000' 3 '/api': { 4 target: 'http://localhost:3000', 5 pathRewrite: { 6 '/api': '' 7 } 8 } 9 }

本地模拟数据

// 2. 模拟数据 /* before(app){ app.get('/api/list', (req, res)=>{ res.json({ result: [ '本地的-----今天天气很好！', '本地的-----适合写代码！', '本地的-----更适合搬砖！' ] }); }); } */

webpack.config.js

转载于:https://www.cnblogs.com/zhangzhengyang/p/11235453.html