您的位置:首页> 日志> 前端技术 正文
DTOP

webpack配置打包相关知识

luosi | 2020年04月03日 |

>>收藏本文 已有 0条评论

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

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

1.配置文件地址:config\index.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.配置文件地址:\build\webpack.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
    }),
]

 

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