TongchengQiu / webpack-best-practice

:shaved_ice::shaved_ice: webpack best practice demo .
http://qiutc.me/post/webpack-best-practice-最佳实践-部署生产.html
ISC License
45 stars 14 forks source link

有关webpack的重复打包问题以及使用JQ插件的问题想请教一下 #4

Open laixstx opened 8 years ago

laixstx commented 8 years ago

文章写得很赞!很受用!!不过作为新手,个人有几个问题想请教一下: 1、我现在是用webpack搭建多页面的web项目,项目有n多个页面,而每次运行webpack进行打包之后,webpack都会将所有的文件都重新打包一次,这样的话很浪费资源而且不太合理... 比如,我现在有login.html,userList.html,adminList.html三个页面,每个页面都有一个对应的入口文件(login.js,userList.js,adminList.js),假设开发项目的周期是一个月,如果我今天只是开发了login相关的功能,然后明天我要接着开发userList相关的功能,那么当我运行 webpack 命令之后,之前没有修改过而且不需要修改的login相关的js/css等文件又被毫无意义地重新打包了一次,这样的话,随着项目周期越来越长,页面越来越多,而每当我运行 webpack 命令,那些之前早就开发好的功能都要被无意义地重新打包一次吗??我只是想将我当天的开发功能和作了修改的功能重新打包就好了,之前已经开发好的功能我肯定是不想再重新又打包生成一次了。而且,在生产环境中,每次打包生成的文件都加了hash,那么旧的文件改怎么处理呢?总不能每次重新打包都先将所有旧的文件都清理一遍吧? 不知道我能不能把问题给说清楚,就想请教一下,这个问题您是怎么处理的呢?

2、结合webpack该怎么使用jquery的插件呢?比如在login的功能中使用 sweetalert 插件(它有 sweetalert.css/sweetalert.min.css和sweetalert.js/sweetalert.min.js这些文件),我是用npm下载sweetalert的。现在我在login.js入口文件中import "sweetalert/dist/sweetalert.css",然后在需要使用sweetalert的组件LoginForm.js中import sweetalert from 'sweetalert'; 可是webpack会报错:

ERROR in ./~/sweetalert/dist/sweetalert.css Module parse failed: F:\MyFiles\myPro\watermirrorPro\shv\view\node_modules\sweetalert\dist\swee talert.css Unexpected token (1:20) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (1:20) 我在webpack的配置文件中已经做了配置,也已经安装了相应的loader,我 import 其他的 css 文件是没有问题的,只是import "sweetalert/dist/sweetalert.css"这个的时候却报错了。。。这是怎么回事呢?麻烦大神帮忙解答一下

TongchengQiu commented 8 years ago

第一个问题的话,每次运行webpack的时候他会根据entry去打包整个依赖然后输出,你没办法去限制每次它只打包哪几个入口,除非己手动删掉它。而且这个去限制是没意义的吧,因为这么一点消耗无所谓吧,而且项目中总有一些公共的依赖,都需要整个项目去打包的。对于hash值的话是有一个 chunkhash 的,它是对于每个模块的hash,不知道能不能解决问题。旧的文件我是都删除的,可以在 npm 的package 配置一个 clean 命令,"clean": "rimraf dist" ,在build的时候先运行clean:"build": "npm run clean && NODE_ENV=production webpack --config webpack.config.prod.js --progress --colors"。 第二个问题的话,可以尝试在 css 的 loader 加上 include: /node_modules/ 配置,