您的位置： 首页 >日志>前端技术>详细内容

前端技术

webpack配置打包相关知识

来源：本站原创 发布时间：2020-04-03 17:09:30 浏览次数： 次 【字体：小 大】

利用webpack来打包生成文件时，可以通过配置让它生成到指定的文件中；方法如下：

第一：配置打包生成的文件存放位置：

1.配置文件地址：configindex.js

2.代码如下图：

const path = require('path')
const pathName='test'
const assetsPublicPath = '/'+pathName+'/'
module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: assetsPublicPath,
    //代理
    proxyTable: {
    },

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8090, // 开发环境访问端口
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, 
  },

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../../produce/'+pathName+'/index.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../../produce/'+pathName),
    assetsSubDirectory: 'static',
    assetsPublicPath: assetsPublicPath,
  }
}

 

 

第二：配置打包生成时对代码进行压缩、混淆、删除打印代码等；

1.安装插件：当前项目根目录下运行：npm install uglifyjs-webpack-plugin -D

2.配置文件地址：buildwebpack.prod.conf.js

3.使用如下图：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 
plugins: [
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false,
          //过滤console.log-start
          drop_console: true,
          pure_funcs: ['console.log']
          //过滤console.log-end
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),
]

 

通过配置后生成的文件就会压缩并混淆到指定目录下。

×

用户登录