这是webpack4演示，webpack5有些插件不在推荐，
1. webpack.base.config.js文件的配置说明
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin'); // 该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象
// const CleanWebpackPlugin = require('clean-webpack-plugin');function resolve (dir) {return path.join(__dirname, dir);
}module.exports = {// webpack打包入口entry: {main: './src/main',vendors: './src/vendors' // 去除不必要的插件，在index.html中需要引入这个文件// 也就是在index.html中加入 <script src="/build/vendor.js"></script>},// webpack打包转换后的文件输出到磁盘位置output: {// __dirname始终指向被执行js文件的绝对路径，这里的path就是指向dist文件夹（也就是输出的位置）path: path.join(__dirname, '../dist/')},// externals: {// 'vue': 'Vue',// 'iview': 'iview',// 'vue-router': 'VueRouter',// 'vuex': 'Vuex',// 'js-cookie': 'Cookies',// // 'tinymce': 'tinymce',// 'axios': 'axios',// // 'echarts': 'echarts',// // 'html2canvas': 'html2canvas',// // 'sortablejs': 'Sortable'// },/*** loader是模块解析，模块转换器* webpack是模块打包工具，而模块不仅仅是js，还可以是css，图片或者其他格式* 但是webpack默认只处理js和json，其他模块就需要用loader了*/ // 模块配置，在webpack里一切皆模块，用来配置需要的匹配规则及使用哪种loader转换器module: {rules: [{test: /\.vue$/, // 正则表达式匹配规则，适配vueloader: 'vue-loader', // 使用vue-loader，加载和转义vue组件options: {loaders: {less: ExtractTextPlugin.extract({use: ['css-loader?minimize', 'autoprefixer-loader', 'less-loader'],fallback: 'vue-style-loader'}),css: ExtractTextPlugin.extract({use: ['css-loader', 'autoprefixer-loader'],fallback: 'vue-style-loader'})}}},{test: /iview\/.*?js$/,loader: 'babel-loader'},{test: /\.js$/,loader: 'babel-loader',exclude: /node_modules/},{test: /\.css$/,use: ExtractTextPlugin.extract({use: ['css-loader?minimize', 'autoprefixer-loader'], // 指定需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loaderfallback: 'style-loader' // 编译后用什么loader来提取css文件})},{test: /\.less/,use: ExtractTextPlugin.extract({use: ['autoprefixer-loader', 'less-loader'], // autoprefixer-loader具有自动添加css前缀的功能fallback: 'style-loader'})},{test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,loader: 'url-loader'},{test: /\.(html|tpl)$/,loader: 'html-loader'}]},resolve: {// resolve.extensions在导入语句没带文件后缀时，webpack会自动带上后缀，去尝试查找文件是否存在，但是在查找的时候，会耗费一定的打包时间extensions: ['.js', '.vue'],alias: { // resolve.alias配置通过别名来将原导入路径映射成一个新的导入路径（优化开发体验）'vue': 'vue/dist/vue.esm.js','@': resolve('../src'),'@views': resolve('../src/views'),'assets': resolve('../src/assets/'),'store': resolve('../src/store/'),'jquery': resolve('../src/common/js/jquery.js')}},// 增加一个pluginsplugins: [new webpack.ProvidePlugin({$: "jquery",jQuery: "jquery"}),// new CleanWebpackPlugin('dist/*.*', {// root: __dirname,// verbose: true,// dry: false// })],
};2. webpack.dev.config.js文件的配置说明（开发环境）
const webpack = require('webpack');
// HtmlWebpackPlugin作用：
// 1、为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题
// 2、可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const merge = require('webpack-merge');
const webpackBaseConfig = require('./webpack.base.config.js');
const fs = require('fs'); //fs 是 file-system 的简写，就是文件系统的意思;在 Node 中如果想要进行文件操作，就必须引入 fs 这个核心模块fs.open('./src/config/env.js', 'w', function (err, fd) {const buf = 'export default "development";';// node --version < v10.1.0// fs.write(fd, buf, 0, buf.length, 0, function (err, written, buffer) {});// node --version > v10.1.0fs.write(fd, buf, 0, 'utf-8', function (err, written, buffer) {if (err) {throw new Error(err);}});
});module.exports = merge(webpackBaseConfig, {// devtool: '#source-map',devtool: '#cheap-module-eval-source-map',output: {publicPath: '/dist/',filename: '[name].js',chunkFilename: '[name].chunk.js'},plugins: [ // 每个插件的具体API配置new ExtractTextPlugin({filename: '[name].css',allChunks: true}),new webpack.optimize.CommonsChunkPlugin({name: 'vendors',filename: 'vendors.js'}),new HtmlWebpackPlugin({ // 打包输出HTMLfilename: '../index.html',template: './src/template/index.ejs',title: '同花顺管理平台',inject: false})],devServer: {port: 8082,host: '0.0.0.0',watchOptions: { // 配置webpack服务ignored: '/node_modules/', // 不监测poll: 1200 // 监测修改的时间(ms)},// lazy: true,//只有在请求时才编译包(bundle)。这意味着 webpack 不会监视任何文件改动。我们称之为“惰性模式”。proxy: { // 设置代理'/yyzt-web': {// target: 'http://121.33.247.51:8602''http://cbas.ths8.com',// target: 'http://127.0.0.1:9080',// target: 'http://cbas.ths8.com',changeOrigin: true,target: 'http://cbas.ths8.com:81',pathRewrite: {'^/yyzt-web': '/yyzt3-web'}},'/yyzt3-web': {// target: 'http://121.33.247.51:8602''http://cbas.ths8.com',// target: 'http://127.0.0.1:9080',target: 'http://cbas.ths8.com:81',// target: 'http://113.9.77.117:9711',// target: 'http://172.20.51.196:8080',changeOrigin: true,pathRewrite: {'^/yyzt3-web': '/yyzt3-web'}},// 自己添加的图片代理'/group1': { // 需要请求的资源target: "http://cbas.ths8.com:81", // 目标域名及地址changeOrigin: true, // 是否跨域pathRewrite: { // 地址重定向'^/group1': '/group1' // 也就是将前面的group1替换成后面的（这里是一样的，所以可以不写）}},'/cbas': {// target: 'http://121.33.247.51:8602''http://cbas.ths8.com',// target: 'http://127.0.0.1:9080',target: 'http://106.37.195.27:8083',changeOrigin: true,pathRewrite: {'^/cbas': '/cbas'}},'/yyzt-html': {// target: 'http://192.168.51.234:8080',target: 'http://point.stocke.com.cn',changeOrigin: true,pathRewrite: {'^/yyzt-html': '/yyzt-html'}},'/point': {// target: 'http://121.33.247.51:8602''http://cbas.ths8.com' 'http://127.0.0.1:9102',target: 'http://127.0.0.1:9102',changeOrigin: true,pathRewrite: {'^/point': '/point'}},'/hexinifs': {// target: 'http://192.168.51.234:8080',target: 'http://point.stocke.com.cn',changeOrigin: true,pathRewrite: {'^/hexinifs': '/hexinifs'}},'/yyzt-uamp-web': {target: 'http://point.stocke.com.cn',// target: 'http://cbas.ths8.com',changeOrigin: true,pathRewrite: {'^/yyzt-uamp-web': '/yyzt-uamp-web'}}}}
});3. webpack.prod.config.js文件的配置说明（生产环境）
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const merge = require('webpack-merge');
const webpackBaseConfig = require('./webpack.base.config.js');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const fs = require('fs');
var path = require('path')
const FastUglifyJsPlugin = require('fast-uglifyjs-plugin');fs.open('./src/config/env.js', 'w', function (err, fd) {const buf = 'export default "production";';// fs.write(fd, buf, 0, buf.length, 0, function(err, written, buffer) {});fs.write(fd, buf, 0, 'utf-8', function (err, written, buffer) { });
});module.exports = merge(webpackBaseConfig, {output: {publicPath: './dist/',filename: '[name].[hash].js',chunkFilename: '[name].[hash].chunk.js'},plugins: [new ExtractTextPlugin({filename: '[name].[hash].css',allChunks: true}),new webpack.optimize.CommonsChunkPlugin({name: 'vendors',filename: 'vendors.[hash].js'}),new webpack.DefinePlugin({'process.env': {NODE_ENV: '"production"'}}),// new webpack.optimize.UglifyJsPlugin({// compress: {// warnings: false// }// }),new FastUglifyJsPlugin({sourceMap: true,compress: {warnings: false,drop_console: true,},// debug设为true可输出详细缓存使用信息:debug: true,// 默认开启缓存，提高uglify效率，关闭请使用 false:cache: true,// 默认缓存路径为项目根目录，手动配置请使用:cacheFolder: path.resolve(__dirname, '../.build_cache'),// 工作进程数，默认os.cpus().lengthworkerNum: 2}),new HtmlWebpackPlugin({filename: '../index_prod.html',template: './src/template/index.ejs',title: '同花顺管理平台',inject: false}),new CleanWebpackPlugin(['./dist/main.*.css', './dist/*.js'], //匹配删除的文件{root: __dirname, //根目录verbose: true, //开启在控制台输出信息dry: true //启用删除文件})]
});4.webpack-merge 合并配置文件
webpack-merge 是一个工具，它允许你将多个 webpack 配置文件合并成一个，这对于维护不同环境（如开发环境、生产环境）的配置特别有用。通过使用 webpack-merge，你可以保持基础配置不变，同时为不同环境添加或覆盖特定的配置选项。
以下是如何使用 webpack-merge 来合并 webpack 配置文件的示例：
首先，你需要安装 webpack-merge：
bash复制代码
npm install --save-dev webpack-merge
yarn add webpack-merge --dev
安装完成后，webpack-merge 将被添加到你的 node_modules 目录中，并且其版本信息将被添加到你的 package.json 文件的 devDependencies 部分。
然后，你可以创建多个配置文件，例如一个基础配置文件 webpack.base.config.js，一个用于开发环境的配置文件 webpack.dev.config.js，以及一个用于生产环境的配置文件 webpack.prod.config.js。
webpack.base.config.js
javascript复制代码const path = require('path'); module.exports = { entry: { app: './src/index.js' }, output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ // 通用加载器配置 ] }, // 其他通用配置...
};webpack.dev.config.js
javascript复制代码const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.config.js'); module.exports = merge(baseConfig, { mode: 'development', devtool: 'inline-source-map', devServer: { contentBase: './dist', hot: true }, // 开发环境特有的配置...
});webpack.prod.config.js
javascript复制代码const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.config.js'); module.exports = merge(baseConfig, { mode: 'production', optimization: { minimize: true }, plugins: [ // 生产环境特有的插件... ], // 生产环境特有的配置...
});在上面的示例中，webpack.dev.config.js 和 webpack.prod.config.js 都使用了 webpack-merge 来合并 webpack.base.config.js 中的基础配置。然后，它们各自添加了针对开发环境和生产环境的特定配置。
通过这种方式，你可以确保基础配置的一致性，并只关注不同环境之间的差异。当你运行 webpack 时，只需要根据当前环境选择正确的配置文件即可。
例如，在开发环境中，你可以这样运行 webpack：
bash复制代码
npx webpack --config webpack.dev.config.js在生产环境中，你可以这样运行：
bash复制代码
npx webpack --config webpack.prod.config.js或者，你可以在 package.json 的 scripts 部分设置相应的命令，以便更方便地运行 webpack。
常用的loader和插件种类繁多，以下是一些常见的示例：
Loader示例：
- babel-loader：用于将ES6+的语法转化为向后兼容的JavaScript版本，使得新特性能够在旧版浏览器中使用。
- style-loader 和 css-loader：用于处理CSS文件。style-loader将CSS添加到DOM中，而css-loader解析CSS文件中的import和url()。
- file-loader 和 url-loader：用于处理在JavaScript中引入的文件，例如图片或字体文件。它们能够将文件移动到输出目录，并在代码中引用它们。
- vue-loader：专门用于加载Vue.js组件，处理单文件组件的.vue文件。
- ts-loader：用于加载TypeScript文件，并将其转换为JavaScript。
插件示例：
- HtmlWebpackPlugin：简化HTML文件的创建，自动引入打包后的JS文件。
- MiniCssExtractPlugin：将CSS提取到单独的文件中，而不是嵌入到JS中。
- CleanWebpackPlugin：在每次构建之前清理输出目录，确保没有旧的构建文件。
- DefinePlugin：允许在编译时创建配置的全局常量，这对于配置模式或环境变量非常有用。
- CopyWebpackPlugin：将单个文件或整个目录复制到构建目录中。
- WebpackBar：在构建过程中显示进度条和相关信息，提供视觉反馈。
这些只是众多可用loader和插件中的一部分。实际上，webpack的生态系统非常庞大，你可以根据项目需求选择适合的loader和插件。同时，随着技术的不断发展，新的loader和插件也不断涌现，建议经常查看webpack的官方文档和社区资源，以获取最新的信息和最佳实践。
)
