发布-build命令

2022-09-03 22:03:19 阅读：229 来源： 互联网

标签：文件 dist 发布 js 命令 webpack build loader

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

发布-build命令