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 From: https://www.cnblogs.com/funkyd/p/16653778.html