发布-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

　　为了每次打包发布时

标签：文件,dist,发布,js,命令,webpack,build,loader
来源： https://www.cnblogs.com/funkyd/p/16653778.html