Webpack是一个的打包平台，可以将sass、图片、字体等所有静态资源打包到js中

最近作者在改造一个传统的静态网站。为了减少http请求，策略之一是将单个静态网页对应的多个静态资源(如字体、css、图片、js)打包输出到一个js文件中，然后将每个html与对应的独立js关联起来

我在网上找到了webpack配置的相关信息。html和js的对应关系是“一对一”和“多对一”，但是很少有“多对多”的实现

但经过一番折腾，终于被我配置好了。在这里，共享与配置文件相关的语法

//入口入口文件支持json格式

入口：{

static/pc/js/index': '。/webStatic/pc/js/index.js '，

static/PC/js/article-details ' : '。/WebStatic/PC/js/article-details . js '，

静态/移动/js/index': '。/webStatic/mobile/js/index.js '，

static/mobile/js/article-details ' : '。/WebStatic/mobile/js/article-details . js '

},

输出：{

path : path . resolve(_ dirname ' ')，

//filename我们可以在它前面使用一个变量[name]，这意味着将条目中的关键字作为文件名，并将其添加到它的前面

filename:'[name]。js '

}

配置描述

根目录下的Webstatic是放置源代码的位置，根目录下的static是js输出的位置

配置文件中有四个映射：网站/PC/js/index.js输出到static/PC/js/index.js，/网站/PC/js/article-details.js输出到static/PC/js/article-details . js，/网站/移动/js/index.js输出到static/mobile/js/index.js，/网站/手机/js/article-details.js输出到static/手机/js/article-details.js。

以后添加其他映射，只需按照条目中的格式添加即可(复制即可)

摘要：

用react或vue在短时间内维护旧网站并重写所有页面是不现实的，但用webpack打包仍然是可行的。配置好多入口多出口的webpack后，就可以用SCS，es6等愉快地写网站了。只需对网站做一些改动。

本文转载自中文网站