description

这里介绍了清除上次打包后的dist文件夹，CopyWebpackPlugin的作用，减小打包出来的bundle.js文件的大小，从bundle里抽离出css，可视化分析打包文件的webpack插件，还有webpack sourceMap定位压缩前代码错误，与配置本地代理实现开发环境跨域

清除上次打包的东西clean-webpack-plugin

为什么要清理/dist文件夹？

如果在多次打包后， 我们的 /dist 文件夹显得相当杂乱。webpack 将生成文件并放置在 /dist 文件夹中，但是它不会追踪哪些文件是实际在项目中用到的。

通常比较推荐的做法是，在每次构建前清理 /dist 文件夹，这样只会生成用到的文件。让我们实现这个需求。

clean-webpack-plugin 是一个流行的清理插件，安装和配置它。

npm install clean-webpack-plugin -D

webpack.config.js

const { CleanWebpackPlugin } = require('clean-webpack-plugin')module.exports = {    //...other code    plugins: [        new CleanWebpackPlugin({              cleanAfterEveryBuildPatterns: ['./dist']        })    ]}new CleanWebpackPlugin({  cleanAfterEveryBuildPatterns: ['./dist']})

现在，执行 npm run build，检查 /dist 文件夹。如果一切顺利，现在只会看到构建后生成的文件，而没有旧文件！

CopyWebpackPlugin

it is to copy files that already exist in the source tree, as part of the build process.

将开发环境下的目录复制到生产环境下。因为如果你需要在代码中引入静态资源文件。如果你对url的引入是相对地址

<img class="logoIcon"  src="../../assets/logo.png"/>

在打包后部署到线上环境(npm run build) 或者在开发环境(npm run dev)下 会找不到资源的路径。因为打包后的目录与开发时的目录将会发生很大的变化。所以不能找到资源路径。

webpack.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin')module.exports = {    //...other code    plugins: [        new CopyWebpackPlugin([{             from: './src/assets',  // 将开发环境的目录             to: './assets'         // 复制到生产环境       }], {           ignore: [],           copyUnmodified: true       }),    ]}

现在所有静态资源只要通过/assets/xx就能访问

<img class="logoIcon"  src="/assets/logo.png"/>

vue打包抽离css

如果嫌弃打包的bundle太大了，想要把css从里面抽离出来。就要用mini-css-extract-plugin了

npm install mini-css-extract-plugin -D

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin')module.exports = {  module: {    rules: [{      test: /\.css$/,     //处理css      exclude: /node_modules/,      use: [        "style-loader",  //将css写入到html中去        MiniCssExtractPlugin.loader,  // 这个必须放在两个loader之间。        "css-loader" // 处理css后 抛到上一层进行处理      ]    }  ]},plugins: [  new MiniCssExtractPlugin({    filename: '[name].css',    chunkFilename: '[id].css',  })]}

打包生成的文件 会发现.vue文件里的css被单独抽离出来了

可视化分析bundle.js资源的webpack插件

webpack-bundle-analyzer，可以清晰的看到项目中一共有多少个包，包的体积是多少，里面加载了哪些东西，大小是多少。

作用 ： 将bundle.js中捆绑的资源大小及关系，用交互式可缩放树形图直观的表示出来，从而有助于知道各资源的大小及关系，并进行优化。

效果图如下：

webpack-bundle-analyzer安装和使用

npm install webpack-bundle-analyzer -D

webpack.config.js

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPluginmodule.exports = {    plugins: [        new BundleAnalyzerPlugin(),    ]}

BundleAnalyzerPlugin构造函数中可配置的对象：

new BundleAnalyzerPlugin({  //  可以是`server`，`static`或`disabled`。  //  在`server`模式下，分析器将启动HTTP服务器来显示软件包报告。  //  在“静态”模式下，会生成带有报告的单个HTML文件。  //  在`disabled`模式下，你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。  analyzerMode: 'server',  //  将在“服务器”模式下使用的主机启动HTTP服务器。  analyzerHost: '127.0.0.1',  //  将在“服务器”模式下使用的端口启动HTTP服务器。  analyzerPort: 8888,   //  路径捆绑，将在`static`模式下生成的报告文件。  //  相对于捆绑输出目录。  reportFilename: 'report.html',  //  模块大小默认显示在报告中。  //  应该是`stat`，`parsed`或者`gzip`中的一个。  //  有关更多信息，请参见“定义”一节。  defaultSizes: 'parsed',  //  在默认浏览器中自动打开报告  openAnalyzer: true,  //  如果为true，则Webpack Stats JSON文件将在bundle输出目录中生成  generateStatsFile: false,   //  如果`generateStatsFile`为`true`，将会生成Webpack Stats JSON文件的名字。  //  相对于捆绑输出目录。  statsFilename: 'stats.json',  //  stats.toJson（）方法的选项。  //  例如，您可以使用`source：false`选项排除统计文件中模块的来源。  //  在这里查看更多选项：https：  //github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21  statsOptions: null,  logLevel: 'info' 日志级别。可以是'信息'，'警告'，'错误'或'沉默'。

sourceMap

Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。

在实际开发过程中，我们在使用webpack打包的时候，打包完成的bundle.js报错信息是很难Debug的，这时候就需要Source Map来还原真实的出错位置。

有了sourceMap，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。这无疑给开发者带来了很大方便。

不然浏览器会定位到压缩过后的代码。无法准确的定位到错误位置

webpack.config.js

module.exports = {    devtool: 'cheap-module-eval-source-map'  }

注意

以上选项通常用于开发环境中：

在生产环境中最好关闭devtool，因为这样可以极大的减小打包的体积。

生产环境下： (none)（省略 devtool 选项） - 不生成 source map。这是一个不错的选择。

proxy

webpack开发配置API代理解决跨域问题-devServer

设置代理的前提条件：
1、需要使用本地开发插件：webpack-dev-server。
2、webpack-dev-server使用的是http-proxy-middleware来实现跨域代理的。

1.一个webpack配置信息：

module.exports = {  //...  devServer: {    proxy: {      '/api': {        target: 'http://www.baidu.com/',        pathRewrite: {'^/api' : ''},        changeOrigin: true,     // target是域名的话，需要这个参数，        secure: false,          // 设置支持https协议的代理      },    }  }};

2. 配置中主要的参数说明

2.1 '/api'

捕获API的标志，如果API中有这个字符串，那么就开始匹配代理，
比如API请求/api/users, 会被代理到请求 http://www.baidu.com/api/users 。

2.2 target

代理的API地址，就是需要跨域的API地址。 地址可以是域名,如：`http://www.baidu.com`也可以是IP地址：`http://127.0.0.1:3000`如果是域名需要额外添加一个参数`changeOrigin: true`，否则会代理失败。

2.3 pathRewrite

路径重写，也就是说会修改最终请求的API路径。
比如访问的API路径：/api/users,
设置pathRewrite: {'^/api' : ''},后，
最终代理访问的路径：http://www.baidu.com/users，
这个参数的目的是给代理命名后，在访问时把命名删除掉。

2.4 changeOrigin

这个参数可以让target参数是域名。

2.5 secure

secure: false,不检查安全问题。
设置后，可以接受运行在 HTTPS 上，可以使用无效证书的后端服务器

参考博客

附完整的webpack.config.js

const path = require('path')  //path是Nodejs中的基本包,用来处理路径const htmlWebpackPlugin = require('html-webpack-plugin')const VueLoaderPlugin = require('vue-loader/lib/plugin')const CopyWebpackPlugin = require('copy-webpack-plugin')const { CleanWebpackPlugin } = require('clean-webpack-plugin')const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPluginconst MiniCssExtractPlugin = require('mini-css-extract-plugin')module.exports = {  entry: "./src/index.js",  output: {    path: path.resolve(__dirname, './dist'),  //打包生成文件地址        filename: 'bundle.js',    // publicPath: '/dist/'  //文件输出的公共路径  },  devtool: 'cheap-module-eval-source-map',  // 在线上环境时最好关闭 可以极大程度减小体积  module: {    rules: [     //针对不同类型的文件,我们定义不同的识别规则,最终目的都是打包成js文件      {        test: /\.vue$/,        exclude: /node_modules/,        use: [          "vue-loader"     //处理.vue文件        ]      },      {        test: /\.css$/,     //处理css        exclude: /node_modules/,        use: [          "style-loader",          MiniCssExtractPlugin.loader,          "css-loader"        ]      },      {        test: /\.js?$/,    //处理js        use: [          {            loader: 'babel-loader',            options: {              presets: ['@babel/preset-env', '@babel/react'],              plugins: [                [require("@babel/plugin-proposal-decorators"), { "legacy": true }]              ]            }          }        ],        include: path.resolve(__dirname, 'src'),        exclude: /node_modules/      },      {        test: /\.(png|gif|jpg|jpeg|svg)$/,     //处理图片        exclude: /node_modules/,        loader: "url-loader",        options: {          limit: 10000        }      },       {        test: /\.(ttf|eot|woff|woff2)$/,        loader: 'file-loader',      },    ]  },  optimization: {    splitChunks: {      chunks: "all"    }  },  plugins: [    new htmlWebpackPlugin({      template: './index.html'    }),    new BundleAnalyzerPlugin(),    new MiniCssExtractPlugin({      filename: '[name].css',      chunkFilename: '[id].css',    }),    new VueLoaderPlugin(),  // vueLoader插件 允许你以一种名为单文件组件的格式撰写 Vue 组件    new CopyWebpackPlugin([{      from: './src/assets',      to: './assets'    }], {        ignore: [],        copyUnmodified: true    }),    new CleanWebpackPlugin({      cleanAfterEveryBuildPatterns: ['./dist']    })  ],  devServer: {    contentBase: path.join(__dirname, './dist'),    host: '0.0.0.0',  //  可以设置0.0.0.0 ,这样设置你可以通过127.0.0.1或则localhost去访问    // open: true,       //  项目启动时,会默认帮你打开浏览器    port: 8087,    // hot: true,        //在单页面应用开发中,我们修改了代码后是整个页面都刷新,开启hot后,将只刷新对应的组件    proxy: {      '/api': {        target: 'http://xxxx.com',        changeOrigin: true,        secure: false,      }    }  }}

参考博客