当前位置:Gxlcms > JavaScript > 详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)

详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)

时间:2021-07-01 10:21:17 帮助过:10人阅读

最近在项目中使用了一下webpack,所以这里打算对目前了解的使用方法做一个小小的总结

为什么是webpack

1.webpack一下自己就🔥了,这绝对是一个重要的原因。

2.然后我之前项目中都是通过requireJS,通过AMD来做到模块化开发。webpak不仅支持打包,而且支持AMD 和 CommonJS方式来做模块化开发,所以打算尝试一下webpack来实现模块化。

3.我的需求简单,适合新上手webpack,只需要生成上线目录,实现模块化,压缩代码等等

webpack实战

webpack.config.js 一般写法

开头声明对路径相关的变量,以及引入依赖,包括webpack(非必须),以及需要的插件
 然后,entry 声明入口相关的如文件名,路径等,output 声明生成文件相关的路径和文件名,module 中是针对不同文件进行处理的 loader 声明,plugins 声明了插件的具体使用。

压缩代码

这里使用webpack的内置的插件,我们写在webpack.config.js 中的plugins 部分

new webpack.optimize.UglifyJsPlugin({
  compress: {
    warnings: false
  }
})

提取公共类库

这部分我没有用到,但也是基于webpack 内置的插件,目的是将用到的jquery 等第三方库整合到一个文件,否则都合并到一个文件,会造成这个文件特别大

首先在entry 声明第三方库

entry: {
  app: path.resolve(APP_PATH, 'index.js'),
  //添加要打包在vendeors里面的库
  vendors: ['jquery', 'moment']
},
plugins: {
   //把入口文件里面的数组打包成vendors.js
  new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
}

css 单独打包

有的时候需要将css 单独打包,作为CDN,或者我这里的情况是是,页面引入了很多的css js 文件,而我的js 在最后加载!所以如果是js 中引入的css ,那么会导致页面在开始的时候没有样式,知道解析到我的js !所以这里将css 单独打包,单独在页面引入!

首先需要安装插件

npm install extract-text-webpack-plugin –save-dev

然后在webpack.config.js 中声明插件

// 引入css 单独打包插件
var ExtractTextPlugin = require("extract-text-webpack-plugin");
// 设置生成css 的路径和文件名,会自动将对应entry入口js文件中引入的CSS抽出成单独的文件
var packCSS = new ExtractTextPlugin('./css/[name].min.css'); 

在plugins 中引入并使用

 plugins: [
  packCSS
 ]

我们需要首先在js 中引用相应的css文件

 require('./css/plan.css');

然后这个插件会自动将js中的css文件提取出来,生成单独的文件

样式的处理

安装 css-loader style-loader

 npm install css-loader style-loader --save-dev

css-loader会遍历css文件,找到所有的url(...)并且处理。style-loader会把所有的样式插入到你页面的一个style

 module: {
   loaders: [
    { 
     test: /\.css$/,
     loaders: ['style', 'css'],
     include: APP_PATH
    }
   ]
 }

图片的处理

安装 url-loader

npm install url-loader --save-dev

webpack.config.js

{
  test: /\.(png|jpg)$/,
  loader: 'url?limit=8192&name=images/[hash:8].[name].[ext]'

}

limit 设置一个阈值,小于这个值得图片就会自动启用 base64 编码的图片,大于这个值的图片会打包到name 这参数对应的路径,图片名称就会包括8位md5编码 name 对应文件本来名称,ext 对应扩展名

我在图片这里遇到的问题和 css 类似,都是原本我是在 js 中引入 css img 等静态资源。但是
 因为我的页面引入了很多的 css, js 文件,而我的js文件放到最后加载,所以会导致我的js引用的css img 在最后才加载。这会导致页面开始的时候会出现没有样式,而图片刚开始会显示失败的问题。

我本来也希望将 img 单独打包,但是搜索也实践了,没有找到可靠地实现方式,于是我把图片放到了其他公共资源目录(~~~~(>_<)~~~~,只好暂时出此下策了)

一个页面一个js 文件

我做的项目是多个页面的,所以需要生成每个页面对应的不同 js。这里的处理方法就是我们每个 js 都作为一个不同的入口文件现在 enrty 中。这样设置好 output 中的公共路径,就能得到不同的 js 文件。

  entry: {
    creative: './src/static/js/apps/idea.js',
    plan: './src/static/js/apps/plan.js',
  },
  output: {
    path: 'dist/',
    filename: 'js/[name].min.js'
  }

更新

代码切分以及异步加载

今天遇到的问题是,我做的一个页面是要分为四个步骤,每个步骤在进入下一步的时候需要对下一步的内容进行接口请求,页面渲染和事件绑定等操作。

之前的做法

拆分了各个步骤对应模块之后,我通过commonJS的方式在入口文件开头引入了各个模块

这时候是这样的

  var stepOne = require('./mods/stepone.js');
  var steptwo = require('./mods/steptwo.js');
  ...

  // 使用的时候
  stepone.checkOne();

这种做法,因为commonJS 的同步加载机制,会导致入口文件打包之后非常臃肿。在首屏,用到用不到处理代码的都会在一开始就加载,严重影响了首屏加载时间。

代码切分之后

我利用webpack的code splitting 特性,将各个步骤的代码进行拆分,实现按需加载。这里主要利用了 webpack 的 require.ensure 函数实现的。非常方便,只需要把异步加载的代码,放到 require.ensure 里面的回调函数就可以实现:

  require.ensure(['./mods/stepone.js'], function(){
    var stepone = require('./mods/stepone.js');
    stepone.checkone();
  }, 'stepone'); // 第三个参数设置打包名称

这样设置,webpack 就会单独生成拆分的文件,我们还需要设置拆分文件的名字和路径。这里我费了一番周折。

webpack 默认给拆分的文件用数字命名,如果我们自己不进行设置,会得到 1.min.js 这样类似的文件。我们可以在 webpack.config.js 中,通过 output.chunkFilename 来设置分块生成文件的名称,分块的路径可以通过 output.publicPath 设置。这里一定要设置 publicPath,不然得到的路径有可能不是我们上线打包的路径。具体我的设置如下:

  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'js/apps/[name].min.js',
    publicPath: '/dist/', // 设置require.ensure路径
    chunkFilename: 'js/apps/[name].min.js' // 设置require.ensure 文件名
  }

总结

webpack 使用起来感觉非常新颖,也容易入手!今天总结的多是入门的内容,后续还要继续使用~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

人气教程排行