分离 应用程序(app) 和 第三方库(vendor) 入口
解析编译后生成压缩文件路径,以及如何命名这些文件
library
主要定义项目中的解析器例如css, jsx, babel等等
loader
通过选择 development 或 production 之中的一个,来设置 mode 参数
none
插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种各样的任务。
new ExtractTextPlugin
其他解决方案
alias
__dirname, // string(绝对路径!)
webpack 的主目录,entry 和 module.rules.loader 选项相对于此目录解析
["react", /^@angular\//]
module.exports = function(env, argv) { return { mode: env.production ? ‘production‘ : ‘development‘, devtool: env.production ? ‘source-maps‘ : ‘eval‘, plugins: [ new webpack.optimize.UglifyJsPlugin({ compress: argv[‘optimize-minimize‘] // 只有传入 -p 或 --optimize-minimize }) ] }; };
module.exports = () => { return new Promise((resolve, reject) => { setTimeout(() => { resolve({ entry: ‘./app.js‘, /* ... */ }) }, 5000) }) }
webpack 将运行由配置文件导出的函数,并且等待 Promise 返回。便于需要异步地加载所需的配置变量。
导出多个配置对象,对于针对多个构建目标(例如 AMD 和 CommonJS)打包一个 library 非常有用。
1 const path = require(‘path‘); 2 const webpack = require(‘webpack‘); 3 const HtmlWebpackPlugin = require(‘html-webpack-plugin‘); 4 const CleanWebpackPlugin = require(‘clean-webpack-plugin‘); 5 const MiniCssExtractPlugin = require(‘mini-css-extract-plugin‘); 6 const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin‘); 7 const OptimizeCSSAssetsPlugin = require(‘optimize-css-assets-webpack-plugin‘); 8 const config = require(‘./config‘); 9 const theme = require(‘./theme‘); 10 11 const { API_ENV } = process.env; 12 const BASE_URL = config.domains[API_ENV].default; 13 14 module.exports = { 15 entry: { // 工程入口 16 app: path.resolve(__dirname, ‘src/index.js‘) // __dirname当前目录 17 }, 18 mode: ‘development‘, // 模式-开发模式 19 devtool: ‘cheap-module-eval-source-map‘, // 是否以及如何生成源映射。影响build和rebuild速度。 20 devServer: { 21 contentBase: ‘./dist‘, // 告诉服务器从哪里提供内容 22 hot: true, // 启用webpack的热模块替换功能 23 port: 8000, // 指定用于侦听请求的端口号 24 host:‘0.0.0.0‘, // 指定要使用的主机。默认情况下这是localhost。 25 historyApiFallback: true, // 使用HTML5历史记录API时,index.html可能必须提供该页面以代替任何404回复。通过传递启用此功能 26 proxy: { // 代理 当拥有单独的API后端开发服务器并且希望在同一域上发送API请求时,代理某些URL会很有用 27 "/api": { 28 target: BASE_URL, // 在后端打开的情况下启用代理BASE_URL 29 changeOrigin: true, 30 pathRewrite: { // 不想/api传递,重写路径 31 "^/api": "" 32 } 33 } 34 }, 35 inline: true // 实时刷新 36 }, 37 output: { // 混淆压缩后的文件输出 38 publicPath: ‘/‘, // 39 filename: ‘public/js/[name].[hash:8].js‘, // 文件名 40 path: path.resolve(__dirname, ‘dist‘) // 文件位置路径 41 }, 42 optimization: { 43 // 分离公共依赖块打包文件 44 splitChunks: { 45 chunks: ‘all‘ 46 } 47 }, 48 plugins: [ // 插件 49 new HtmlWebpackPlugin({ // 单独生成HTML文件 50 template: path.resolve(__dirname, ‘public/index.html‘), // src文件 51 filename: ‘index.html‘// dist文件 52 }), 53 new webpack.HotModuleReplacementPlugin() 54 ], 55 module: { // 主要定义项目中的解析器例如css, jsx, babel等等,使用loader 56 rules: [ 57 { 58 test: /\.(js|jsx)$/, // 被打包文件-后缀名为js或jsx的文件 59 loader: ‘babel-loader?cacheDirectory‘, // 使用babel-loader打包 60 include: [ 61 path.resolve(__dirname, ‘./src/‘) 62 ], 63 exclude: /node_modules/, 64 options: { 65 plugins: [ 66 [ 67 ‘import‘, 68 { 69 libraryName: ‘antd-mobile‘, 70 style: true 71 }, 72 ‘react-photoswipe‘ 73 ], 74 ‘transform-decorators-legacy‘ 75 ] 76 } 77 }, 78 { 79 test: /\.(css|less)$/, 80 exclude: /node_modules/, 81 use: [ // 对test文件打包之前,先用以下loader转换文件 82 { 83 loader:‘style-loader‘ 84 }, 85 { 86 loader: ‘css-loader‘, 87 options: { 88 sourceMap: true, 89 modules: true, 90 localIdentName: "[local]--[hash:base64:5]" 91 } 92 }, 93 { 94 loader: ‘less-loader‘, 95 options: { 96 javascriptEnabled: true, 97 modifyVars: theme 98 } 99 } 100 ] 101 }, 102 { 103 test: /\.(css|less)$/, 104 include: /node_modules/, 105 use: [ 106 { 107 loader:‘style-loader‘ 108 }, 109 { 110 loader: ‘css-loader‘ 111 }, 112 { 113 loader: ‘less-loader‘, 114 options: { 115 javascriptEnabled: true, 116 modifyVars: theme 117 } 118 } 119 ] 120 }, 121 { 122 test: /\.(png|svg|jpe?g|gif)$/i, 123 exclude: /node_modules/, 124 use: [ 125 { 126 loader: ‘file-loader‘, 127 options: { 128 outputPath: ‘public/images/‘, 129 name: ‘[name].[hash:8].[ext]‘ 130 } 131 }/* , 132 { 133 loader: ‘image-webpack-loader‘, 134 options: { 135 mozjpeg: { 136 progressive: true, 137 quality: 65 138 }, 139 optipng: { 140 enabled: false 141 }, 142 pngquant: { 143 quality: ‘65-90‘, 144 speed: 4 145 }, 146 gifsicle: { 147 interlaced: false 148 }, 149 webp: { 150 quality: 75 151 } 152 } 153 } */ 154 ] 155 }, 156 { 157 test: /\.(woff|woff2|eot|ttf|otf)$/, 158 exclude: /node_modules/, 159 use: [ 160 ‘file-loader‘ 161 ] 162 } 163 ] 164 }, 165 resolve: { 166 alias: { // 依赖 对引用的文件设置别名 167 assets: path.resolve(__dirname, ‘src/assets‘), 168 images: path.resolve(__dirname, ‘src/assets/images‘), 169 utils: path.resolve(__dirname, ‘src/utils‘), 170 pages: path.resolve(__dirname, ‘src/pages‘), 171 components: path.resolve(__dirname, ‘src/components‘) 172 } 173 } 174 };
const path = require(‘path‘);const webpack = require(‘webpack‘);const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);const CleanWebpackPlugin = require(‘clean-webpack-plugin‘);const MiniCssExtractPlugin = require(‘mini-css-extract-plugin‘);const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin‘);const OptimizeCSSAssetsPlugin = require(‘optimize-css-assets-webpack-plugin‘);const config = require(‘./config‘);const theme = require(‘./theme‘);
const { API_ENV } = process.env;const BASE_URL = config.domains[API_ENV].default;
module.exports = { entry: { // 工程入口 app: path.resolve(__dirname, ‘src/index.js‘) // __dirname当前目录 }, mode: ‘development‘, // 模式-开发模式 devtool: ‘cheap-module-eval-source-map‘, // 是否以及如何生成源映射。影响build和rebuild速度。 devServer: { contentBase: ‘./dist‘, // 告诉服务器从哪里提供内容 hot: true, // 启用webpack的热模块替换功能 port: 8000, // 指定用于侦听请求的端口号 host:‘0.0.0.0‘, // 指定要使用的主机。默认情况下这是localhost。 historyApiFallback: true, // 使用HTML5历史记录API时,index.html可能必须提供该页面以代替任何404回复。通过传递启用此功能 proxy: { // 代理 当拥有单独的API后端开发服务器并且希望在同一域上发送API请求时,代理某些URL会很有用 "/api": { target: BASE_URL, // 在后端打开的情况下启用代理BASE_URL changeOrigin: true, pathRewrite: { // 不想/api传递,重写路径 "^/api": "" } } }, inline: true // 实时刷新 }, output: { // 混淆压缩后的文件输出 publicPath: ‘/‘, // filename: ‘public/js/[name].[hash:8].js‘, // 文件名 path: path.resolve(__dirname, ‘dist‘) // 文件位置路径 }, optimization: { // 分离公共依赖块打包文件 splitChunks: { chunks: ‘all‘ } }, plugins: [ // 插件 new HtmlWebpackPlugin({ // 单独生成HTML文件 template: path.resolve(__dirname, ‘public/index.html‘), // src文件 filename: ‘index.html‘// dist文件 }), new webpack.HotModuleReplacementPlugin() ], module: { // 主要定义项目中的解析器例如css, jsx, babel等等,使用loader rules: [ { test: /\.(js|jsx)$/, // 被打包文件-后缀名为js或jsx的文件 loader: ‘babel-loader?cacheDirectory‘, // 使用babel-loader打包 include: [ path.resolve(__dirname, ‘./src/‘) ], exclude: /node_modules/, options: { plugins: [ [ ‘import‘, { libraryName: ‘antd-mobile‘, style: true }, ‘react-photoswipe‘ ], ‘transform-decorators-legacy‘ ] } }, { test: /\.(css|less)$/, exclude: /node_modules/, use: [ // 对test文件打包之前,先用以下loader转换文件 { loader:‘style-loader‘ }, { loader: ‘css-loader‘, options: { sourceMap: true, modules: true, localIdentName: "[local]--[hash:base64:5]" } }, { loader: ‘less-loader‘, options: { javascriptEnabled: true, modifyVars: theme } } ] }, { test: /\.(css|less)$/, include: /node_modules/, use: [ { loader:‘style-loader‘ }, { loader: ‘css-loader‘ }, { loader: ‘less-loader‘, options: { javascriptEnabled: true, modifyVars: theme } } ] }, { test: /\.(png|svg|jpe?g|gif)$/i, exclude: /node_modules/, use: [ { loader: ‘file-loader‘, options: { outputPath: ‘public/images/‘, name: ‘[name].[hash:8].[ext]‘ } }/* , { loader: ‘image-webpack-loader‘, options: { mozjpeg: { progressive: true, quality: 65 }, optipng: { enabled: false }, pngquant: { quality: ‘65-90‘, speed: 4 }, gifsicle: { interlaced: false }, webp: { quality: 75 } } } */ ] }, { test: /\.(woff|woff2|eot|ttf|otf)$/, exclude: /node_modules/, use: [ ‘file-loader‘ ] } ] }, resolve: { alias: { // 依赖 对引用的文件设置别名 assets: path.resolve(__dirname, ‘src/assets‘), images: path.resolve(__dirname, ‘src/assets/images‘), utils: path.resolve(__dirname, ‘src/utils‘), pages: path.resolve(__dirname, ‘src/pages‘), components: path.resolve(__dirname, ‘src/components‘) } }};
原文:https://www.cnblogs.com/chaoxiZ/p/9487809.html