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
            }
          }
        })

原文地址：http://www.cnblogs.com/bm20131123/p/14911536.html