vue中基于webpack打包的一些配置说明

以下配置只限于打包时assetsPublicPath路径变化时的配置，如果是正常的打包，不用配置任何路径，不必参考！

1.静态资源配置：

index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/aa/' // 相对路径、
assetsRoot : 在当前目录的上一级 的 dist目录下输出资源文件
assetsSubDirectory: 把所有的静态资源打包到 dist下的 static文件夹下
assetsPublicPath :代表生成的index.html文件，里面引入资源时，路径前面要加上 '/aa/',也就是assetsPublicPath的值，即在index.html代码中引用静态文件：
<script type=text/javascript src=/aa/static/js/manifest.740066d6ac74dd6e7570.js>

 

 

2.图片配置

通过src，background等引入的图片地址，在build -> utils.js -> 查找ExtractTextPlugin.extract方法，添加publicPath:'/aa/' aa:指当前项目打包配置的名称

 

3.全局变量配置

系统在static静态文件中添加的全局js配置文件，可通过在mani.js 中采用import方法引入；如此在js配置文件中可通过环境变量定义相应的配置参数

 

4.打包输出的index模板文件配置

build --> webpack.prod.conf.js(什么环境就修改相应的配置文件) --> 找到new HtmlWebpackPlugin()方法，将其内部的template值修改成打包时想要打包的html模板文件

 

5.去掉打包注释

new UglifyJsPlugin({
          uglifyOptions: {
            // 删除注释
            output: {
              comments: false
            },
            // 删除console debugger 删除警告
            compress: {
              drop_console: true, //console
              drop_debugger: false,
              pure_funcs: ['console.log'] //移除console
            }
          }
        })

 6. 【process.argv】 获取打包指令中的参数

如"build:suzhou": "node build/build.js --suzhou", 如何根据打包指令获取指令中携带的自定义参数 '--suzhou'？

可通过process.argv获取：process.argv是一个包含命令行参数的数组。第一个元素为node，第二个元素为JavaScript文件的名称。接下来的元素将是任何其他命令行参数。