发布-build命令

1.配置webpack的打包发布

  在package.json文件的script节点下,新增build命令如下:

"script":{
    "dev":"webpack server",//开发环境中,运行 dev 命令
    "build":"webpack --mode production" //项目发布时,运行build命令
}

2.把JavaScript文件统一生成到js目录中

  在webpack.config.js配置文件的output节点中,进行如下的配置:

output:{

  path:path.join(__dirname,'dist'),

  //明确告诉webpack 把生成的bundle.js 文件存放到 dist 目录下的js子目录中

  filename:'js/bundle.js',

}

3.把图片文件统一生成到image目录中

  修改webpack.config.js中的url-loader配置项,新增outputPath选项即可指定图片文件的输出路径:

{
    test:/\.jpg|png|gif$/,
    user:{
        loader:'url-loader',
        options:{
            limit:22228,
            //明确指定把打包生成的图片文件,存储到dist目录下的image文件中
            outputPath:'image',
        },
    },
}

  或者修改module->rules->test(推荐):

//处理图片的loader
//如果需要调用的loader只有一个,则只传递一个字符串也许,如果有多个loader,则必须指定数组
//在配置url-loader的时候,多个参数之间,使用&符号进行分隔
{test:/\.jpg|png|gift$/,use:'url-loader?limit=470&outputPath=images'},

4.自定清理dist目录下的旧文件clean-webpack-plugin

  为了每次打包发布时

posted @ 2022-09-03 21:45  Funkyd  阅读(161)  评论(0编辑  收藏  举报