首页 » 漏洞 » 使用webpack管理多页应用技巧总结

使用webpack管理多页应用技巧总结

 

随着前端功能不断丰富,前端代码也越来越复杂难以管理。为了简化开发的复杂度,出现了众多新的处理技术:模块化、组件化、css预处理器(less,scss)等,它们提高了我们开发效率,但众多模块文件的处理打包还是会非常繁琐的。

使用webpack管理多页应用技巧总结

Webpack是一个nodejs工具,它的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个浏览器可识别的JavaScript文件。

webpack {entry file/入口文件}   {destination for bundled file/存放bundle.js的地方}  

编写它的默认配置文件webpack.config.js,加入简单配置就可以简化上面的命令为webpack(非全局安装需使用node_modules/.bin/webpack):

module.exports = {            entry:  __dirname + "/development/main.js",//已多次提及的唯一入口文件            output: {              path: __dirname + "/build",//打包后的文件存放的地方              filename: "bundle.js"//打包后输出文件的文件名            }  

接上一步,继续修改该node的配置文件package.json,加入如下配置就可以使用更简单的命令npm start:

"scripts": {      "start": "webpack"       ......  },  

这就是webpack的简单用法了,下面开始详细介绍webpack的配置文件。

一、.webpack的配置文件其实就是一个node的module,用commonJS风格编写。默认名为webpack.config.js,要自定义配置文件名可以在webpack命令中指定(显然不能写到配置文件中):

webpack --config ./webpackConfig/dev.config.js 

默认会以当前目录为基本目录(可以通过--content-base来更换基本目录),webpack-dev-server生成的包并没有放在你的真实目录中,而是放在了内存中。可以另外开一个cmd,使用监控命令来输出到磁盘:

webpack --watch

二、entry段

可以是字符串(单入口),可以是数组(多入口),但为了后续发展,建议【使用object】。entry.value是入口文件或者内置模块名,entry.key就是output.filename中的[name]变量的值。

  • entry值是字符串或者数组时时,output中没有变量[name],entry值是对象时,output中才有变量[name]。
  • entry值是数组,表示把数组中的所有js文件内容都打包到一个js文件内作为入口js文件。
  • entry的值是对象,表示这是一个多页面应用,对象里每一个属性代表一个入口js文件配置。属性的值还可以是数组,表示数组中的文件都会被打包到同一个文件中,一般用来打包合并第三方插件代码到同一个js文件,减少网络请求次数。

三、output段

相当于【一套规则】,所有的入口都必须使用这一套规则,不能针对某一个特定的入口来制定output规则。

  1. output中的常用参数包括:path/publicPath/filename/chunkFilename。
  2. path参数(只是给webpack用的)表示生成文件的根目录,需要传入一个【文件系统绝对路径】。path参数和后面的filename参数共同组成入口文件的完整路径。
  3. publicPath(是给webpack-dev-server用的)参数表示的是一个【URL路径】(指向生成文件的根目录),用于生成css/js/图片/字体文件等资源的起始路径,会自动加到资源文件的url前面。
  4. path参数其实是针对本地文件系统的,而publicPath则针对的是浏览器;因此,publicPath既可以是一个相对路径(相对当前代码所在文件路径),如示例中的'../../../../build/',也可以是一个绝对路径如http://www.xxxxx.com/。一般来说,我还是更推荐相对路径的写法,这样的话整体迁移起来非常方便。那什么时候用绝对路径呢?其实也很简单,当你的html文件跟其它资源放在不同的域名下的时候,就应该用绝对路径了,这种情况非常多见于后端渲染模板的场景。
  5. filename参数是生成出来的入口文件的【命名规则】:[name]指代entry配置的key,[hash]与版本有关,每次编译都不一样,但在同一次编译过程中生成的文件它都是一样的,[chunkhash]对每个文件生成hash,与文件内容有关,而与版本无关。
  6. chunkFilename参数也是用来定义生成文件的命名方式,针对除入口文件外的chunk命名。
  7. library参数中的变量[name]就是webpack.DllPlugin中name参数的变量[name]

四、用CommonsChunkPlugin【智能】判断提取并打包、出现在入口js文件中的公共代码

var commonsChunkPlugin = new webpack.optimize.CommonsChunkPlugin({          name: 'commons', // 放共有代码的chunck的唯一标识符(可以在后面filename中用[name]引用)          filename: '[name].bundle.js', // 放共有代码的文件名的模板([name]=CommonsChunkPlugin.name),它的省略值就是[name].js          minChunks: 4, // 设定要有4个chunk(即4个入口)都有的代码才会被纳入公共代码,默认在所有入口文件中都出现的代码才会提取。          chunks:[],//表示需要在哪些chunk里寻找公共代码进行打包。则默认提取范围为所有的chunk。  });//最终生成文件的url是ouput.path + CommonsChunkPlugin.filename  

它的作用在于:在以入口文件为单位打包js的前提下,再进一步去提取入口文件间的共有代码:

1.如果name的值是不存在的chunk,则filename的值不能与现有的入口文件打包后的名字重复:

  • 如果只给了name、filename,就是在<所有入口js>中提取<全部都有>的代码单独打包
  • 如果给minChunks:2,针对<全部都有>,表示限定了在<所有入口js>中找,只有同时在任意2个入口文件中都出现的代码才会被提取单独打包
  • 如果给chunks:['a','b'],针对<所有入口js>,表示只从a、b这两个入口文件中提取<全部都有>的代码单独打包

2.如果name的值是现有chunk(entry.key),就会提取共有代码放到同名的入口文件中(还可以通过filename改变对它打包后的文件名,通过minChunks规定在多少个入口文件中都出现了的代码才算共有代码,通过chunks需要提取共有代码的入口文件范围)。

五、兼容老式的jQuery插件的方式

解决使用老的jquery插件时报$/jQuery未定义错误。原因是我们在require jquery的时候,实际上并不会把jQuery对象设置为全局变量。jquery插件们找不到jQuery对象了,因为在它们各自的上下文环境里,既没有局部变量jQuery(因为没有适配AMD/CMD,所以代码内部就没有写相应的require语句引入依赖),也没有全局变量jQuery。(切记【三种方法不要混用】):

方法一、ProvidePlugin + expose-loader【用ProvidePlugin向插件中引入局部变量jQuery、用expose-loader引入全局变量jQuery】。

var providePlugin = new webpack.ProvidePlugin({      $: 'jquery',      jQuery: 'jquery',      'window.jQuery': 'jquery',      'window.$': 'jquery',  });  

ProvidePlugin的机制是:【当webpack加载到某个js模块里,出现了未定义且名称符合(字符串完全匹配)配置中key的变量时】,会自动require配置中value所指定的js模块。使用ProvidePlugin还有个好处,就是,你自己写的代码里,再!也!不!用require jquery啦!。

expose-loader【将指定js模块export的变量声明为全局变量】。如果你所有的jQuery插件都是用webpack来加载的话,的确用ProvidePlugin就足够了;但总有那么些需求是只能用<script>来加载的:

{      test: require.resolve('jquery'),  // 此loader配置项的目标是NPM中的jquery的资源路径      loader: 'expose?$!expose?jQuery', // 先把jQuery对象声明成为全局变量`jQuery`,再通过管道进一步又声明成为全局变量`$`  },  

方法二、使用externals配置项,用来【将某个全局变量“伪装”成某个js模块的exports】,当某个js模块显式地调用var $ = require('jquery')的时候,就会把window.jQuery返回给它,但是要先在页面中写<script>标签手动加载 jquery.min.js(意味着如果某个库没有提供生产环境的文件XXX.min.js就不能用这个方法):

externals: {      'jquery': 'window.jQuery',  }  

方法三、imports-loader,相当于【手动版的ProvidePlugin】,不建议使用

{      test: require.resolve("some-module"),      loader: "imports?$=jquery&jQuery=jquery", // 相当于`var $ = require("jquery");var jQuery = require("jquery");`  }  

六、其它资源的打包处理方式

loader【扩展了require()方法的能力】,使它可以以模块的形式导入非js文件,处理最后导出的都是javascrit。loader有两种使用方式,一种是写在require的参数里: require("!style!css!./style.css");还有一种是些到配置文件中,通过扩展名自动绑定loader。

1.对css的处理方式

less-loader模块对less文件进行编译,但并不会针对url()语法做特别的转换。如果想把url()语句里涉及到的文件(比如图片、字体文件等)也一并用webpack打包的话,就必须利用管道交给css-loader做进一步的处理。在css-loader会把它转成require()语句,从而触发在webpack配置文件里定义好可以处理这类资源的其它loader(比如url-loader,file-loader)。一般我在url()语句里都会以相对路径的方式(相对于此语句所在的less/css文件)来指定资源路径。

方法一、可以使用style-loader直接把css代码段跟js打包在一起,并自动用<style>标签插入到页面。

方法二、也可以用ExtractTextPlugin生成并加载CSS文件(结果是每个入口js都只对应一个css文件)的形式。extractTextPlugin会对每一个entry执行操作:查找entry中所有通过require()语句导入的css代码,把它们打包到特定路径(由插件的唯一参数指定)的一个css文件中:

var precss       = require('precss');      var autoprefixer = require('autoprefixer');      var ExtractTextPlugin = require('extract-text-webpack-plugin');      ......      module.exports = {          ......          module: {          loaders: [              {              test:   //.css$/,              exclude: /node_modules|bootstrap/,              //关闭autoprefixer以避免你的废弃CSS代码被css-loader删除了              //第一步:loader里加入ExtractTextPlugin.extract(),这样才会提取css到独立的文件              loader: ExtractTextPlugin.extract('css-loader?minimize&-autoprefixer!postcss-loader'),              }          ]          },          //PostCSS 是ExtractTextPlugin的插件,主要功能只有两个:第一个就是前面提到的把 CSS 解析成 JavaScript 可以操作的抽象语法树结构(AST),第二个就是调用插件来处理 AST 并得到结果。          postcss: function () {          return [precss, autoprefixer({              remove: false,              browsers: ['ie >= 8', '> 1% in CN'],          })];          },          ......          plugins: [          //第二步:指定打包css文件的文件名和路径(相对于output.path)          new ExtractTextPlugin('[name]/styles.css'), // [name]=entry.key,表示每一个入口js文件可以对应打包一个css文件,不用这个[name]变量就会把所有入口文件中的require("XXX.css")语句引入的css文件内容都打包到同一个文件中。          ]      }  

2.对图片和字体文件的处理方式

图片可以直接在js文件中通过require导入,也可以在css中通过url()引入,所以对应有两种打包方式:

方法一、require('!url-loader?limit=8192&name=static/images/[hash].[ext]!./imgs/login-bg.jpg')//只对单个图片文件,用于在js文件中导入图片

方法二、loader: 'url?limit=8192&name=./static/img/[hash].[ext]'//可以匹配文件后缀,从而批量处理,用于在css文件中的url()语句处理

表示图片小于8k就转成url(dataURL)直接替换原url()语句,否则打包到output.publicPath + /static/img/[hash].[ext](只是简单的字符串拼接,没有路径解析操作),然后用这个路径替换掉原url()中的路径。

file-loader的主要功能是:把源文件迁移到指定的目录(可以简单理解为从源文件目录迁移到build目录),并返回新文件的路径(只是简单的字符串拼接,没有路径解析操作),与url-loader的使用方式相同(没有limit参数)

七、用DllPlugin&DllReferencePlugin把第三方库预打包成dll

但与CommonsChunkPlugin不一样的是,它不仅仅是把公用代码提取出来,还进一步把公用代码和它的使用者(业务代码)从编译这一步就分离出来,以做到分别编译公用代码和业务代码。因为业务代码常改,而公用代码不常改,开发过程中就可以做到只编译一次公用代码,在以后的修改重编译过程中就会把公用代码排除在外。

1.编写配置文件ddl.config.js:

const webpack = require('webpack');            module.exports = {              output: {              path: 'build',              filename: '[name].js',              library: '[name]',//与webpack.DllPlugin.name保持一样              },              entry: {              "lib": ['react','react-dom','react-router',]//需要打包成dll的公共模块              },              plugins: [              new webpack.DllPlugin({                  path: 'manifest.json',                  name: '[name]',//与output.library保持一样                  context: __dirname,//与DllReferencePlugin.context保持一样,建议统一设置为项目根目录              }),              ],          };  

2.编译一次公共代码:

webpack --progress --colors --config ./ddl.config.js

,结果会输出两个文件一个是打包好的 lib.js,一个就是 manifest.json

3.在打包业务代码的配置文件webpack.config.js中引用:

plugins: [            new webpack.DllReferencePlugin({              context: __dirname,//DllPlugin.context保持一样,建议统一设置为项目根目录              manifest: require('./manifest.json'),            }),          ]  

4.以后业务代码修改只需要运行:

webpack --progress --colors --config ./webpack.config.js

,而不用再执行编译公共代码的命令了。

八、自动生成html页面

每一个html-webpack-plugin的对象实例都只针对/生成一个页面(会自动向模板文件里插入依赖的js、css标签,最后生成html文件),因此,我们做多页应用的话,就要配置多个html-webpack-plugin的对象实例:

new HtmlWebpackPlugin({      filename: `${page}/page.html`,//生成html页面的命名,最终位置:output.path + HtmlWebpackPlugin.filename      template: path.resolve(dirVars.pagesDir, `./${page}/html.js`),//生成html需要引入的模板路径      chunks: [page, 'commons/commons'],//指定生成的html文件中需要引入的、打包好的入口js文件,                        //如果使用了CommonsChunkPlugin,则这里必须填写存放公共js代码的chunk的name      hash: true, // 为静态资源生成hash值      minify: true,      xhtml: true,    });  

另外,webpack默认支持的ejs模板,还需要在webpack配置文件中配置好相应的loader。

九、用resolve为require做请求重定向

可以提高打包效率节省时间。这里的请求是对模块的依赖,也就是一个 require 语句,而不是一个 HTTP 请求:

resolve: {     alias: {         myModule: "app/my.min.js"//require('myModule')就相当于require('app/my.min.js')     }   }  

参考资料:https://segmentfault.com/a/1190000006843916

原文链接:使用webpack管理多页应用技巧总结,转载请注明来源!

0