经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » webpack » 查看文章
详解webpack+ES6+Sass搭建多页面应用
来源：jb51　　时间：2018/11/5 10:46:10　　对本文有异议

webpack同之前的gulp相比，gulp属于非模块化打包工具，webpack属于模块化打包工具，两者的优劣这里不做过多分析（可自行百度）。

目的：是为了分享一下使用过程中，用到的插件、loader、遇到的各种问题以及解决办法，最后会附上最终代码。

在这个项目中，用 webpack打包css、scss、js、图片文件、jquery、第三方插件、字体图标，编译es6、压缩html、压缩js、压缩css ，基本涵盖了常用的东西。

代码结构如下

下面单独说几个难点

1、打包多页面，使用到的插件是html-wepack-plugin ， html-loader ，也就是你有多少个页面，就有多少个入口，也就写多少个模版文件。当然，页面过多时，可以考虑遍历处理。

  1. //引入路径插件
  2. const path = require('path');
  3. //引入导出html插件
  4. const HtmlWebpackPlugin = require('html-webpack-plugin');
  5.  
  6. const config = {
  7.   //入口
  8.   entry:{
  9.   home:'./pages/lawSearchHomepage.js',
  10.   list:'./pages/lawSearchList.js'
  11.   },
  12.   //出口
  13.   output:{
  14.   filename: '[name].bundle.js',
  15.   path: path.resolve(__dirname,'build')    
  16.   },
  17. //插件
  18.   plugins: [
  19.     //html单独导出插件——首页
  20.     new HtmlWebpackPlugin({
  21.       filename:'lawSearchHomepage.html',//输出后的文件名称
  22.       template:'./pages/lawSearchHomepage.html',//模版页面路径
  23.       favicon:'./pages/images/favicon.ico',//页签图标
  24.       chunks:['home'],//需要引入的js文件名称
  25.       inject: true,
  26.       hash:true,//哈希值
  27.       minify: {//压缩
  28.         removeComments: true,
  29.         collapseWhitespace: true
  30.       }
  31.     }),
  32.     //html单独导出插件——列表页
  33.     new HtmlWebpackPlugin({
  34.       filename:'lawSearchList.html',
  35.       template:'./pages/lawSearchList.html',
  36.       favicon:'./pages/images/favicon.ico',
  37.       chunks:['list'],
  38.       inject: true,
  39.       hash:true,
  40.       minify: {
  41.         removeComments: true,
  42.         collapseWhitespace: true
  43.       }
  44.     })
  45.  ] 
  46. }
  47. module.exports = config;

2、单独打包css，使用到的插件extract-text-webpack-plugin ，loader有style-loader、css-loader、sass-loader、node-sass，因为每个页面要引入相对应的css文件，所以，在js入口文件里通过require('./lawSearchHomepage.scss')引如对应的scss文件，打包后css文件会单独打包，并通过link的形式引入html

  1. //引入导出css插件
  2. const ExtractTextPlugin = require('extract-text-webpack-plugin');
  3.  
  4. //loader
  5. {//CSS
  6.   test:/\.css/,
  7.   use:ExtractTextPlugin.extract({
  8.     use:['css-loader']
  9.   })
  10. },
  11. {//Sass
  12.    test:/\.scss/,
  13.    use:ExtractTextPlugin.extract({
  14.     fallback:"style-loader",
  15.     use:['css-loader','sass-loader']
  16.    },)
  17. }
  18. //plugins
  19. //将css单独打包插件
  20. new ExtractTextPlugin({
  21.    filename:"[name].css",//制定编译后的文件名称
  22.    allChunks:true,//把分割的块分别打包
  23. }),

3、处理es6，安装babel、babel-loader@7（因为下面压缩js，其他版本报错）、babel-core、babel-preset-es2015（也是为了解决压缩js报错）

  1. //loader
  2. {//ES6
  3.    test:/\.js$/,
  4.    loader:'babel-loader',
  5.    // exclude:__dirname+'node_modules',//不对这个进行babel转换，这里边已经打包好，这样能减少打包时间
  6.    // include:__dirname+'src'这里的src是你要编译的js文件的目录,
  7.    exclude:path.resolve(__dirname,'node_modules'),
  8.    include:path.resolve(__dirname,'pages'),
  9.    query:{//若在package.json中定义了这个presets，则这边可以删掉
  10.      presets:['es2015']
  11.    }
  12. },

4、处理jquery，安装expose-loader

第一种方法可以通过在js里require('expose-loader?$!jquery');引入jquery

第二种通过loader

  1. //loader
  2. {//Jquery
  3.    test: require.resolve('jquery'),
  4.    use: [{
  5.      loader: 'expose-loader',
  6.      options: 'jQuery'
  7.    },{
  8.      loader: 'expose-loader',
  9.      options: '$'
  10.    }]
  11. },

5、压缩css，使用插件optimize-css-assets-webpack-plugin，安装cssnano

  1. //引入压缩css的插件
  2. const optimizeCss = require('optimize-css-assets-webpack-plugin');
  3. //引入cssnano插件
  4. const cssnano = require('cssnano');
  5.  
  6. //plugins
  7. plugins:[
  8.   new optimizeCss({
  9.      assetNameRegExp: /\.style\.css$/g,
  10.      cssProcessor: cssnano,
  11.      cssProcessorOptions: { discardComments: { removeAll: 
  12.        true } },
  13.      canPrint: true
  14.   }),    
  15. ],
  16. //压缩优化css,不写这个css还是没压缩，不知道为啥
  17. optimization: {
  18.     // minimize: true,
  19.   minimizer: [new optimizeCss({})]
  20. },

6、压缩js，一般的情况下，js默认就是压缩状态，但是在压缩完css后，js就不是压缩的了，所以还是处理一下，编译更快

用的插件uglifyjs-webpack-plugin

  1. //引入js压缩插件
  2. const uglifyjs = require('uglifyjs-webpack-plugin');
  3.  
  4. //plugins
  5. new uglifyJs()

我的package.json中安装的插件

  1. "devDependencies": {
  2.   "babel": "^6.23.0",
  3.   "babel-core": "^6.26.3",
  4.   "babel-loader": "^7.1.5",
  5.   "babel-preset-es2015": "^6.24.1",
  6.   "clean-webpack-plugin": "^0.1.19",
  7.   "css-loader": "^1.0.0",
  8.   "cssnano": "^4.1.7",
  9.   "expose-loader": "^0.7.5",
  10.   "extract-text-webpack-plugin": "^4.0.0-beta.0",
  11.   "file-loader": "^2.0.0",
  12.   "font-awesome-webpack": "^0.0.5-beta.2",
  13.   "html-loader": "^0.5.5",
  14.   "html-webpack-plugin": "^3.2.0",
  15.   "jquery": "^3.3.1",
  16.   "node-sass": "^4.9.4",
  17.   "optimize-css-assets-webpack-plugin": "^5.0.1",
  18.   "postcss-loader": "^3.0.0",
  19.   "sass-loader": "^7.1.0",
  20.   "style-loader": "^0.23.1",
  21.   "typeahead.js": "^0.11.1",
  22.   "uglifyjs-webpack-plugin": "^2.0.1",
  23.   "url-loader": "^1.1.2",
  24.   "webpack": "^4.23.1",
  25.   "webpack-cli": "^3.1.2",
  26.   "webpack-dev-server": "^3.1.10"
  27.  }

webpack.config.js里的代码（完整版）

  1. //引入路径插件
  2. const path = require('path');
  3. //引入导出html插件
  4. const HtmlWebpackPlugin = require('html-webpack-plugin');
  5. //引入清除插件
  6. const CleanWebpackPlugin = require('clean-webpack-plugin');
  7. //引入导出css插件
  8. const ExtractTextPlugin = require('extract-text-webpack-plugin');
  9. //引入webpack
  10. const webpack = require('webpack');
  11. //引入压缩css的插件
  12. const optimizeCss = require('optimize-css-assets-webpack-plugin');
  13. //引入cssnano插件
  14. const cssnano = require('cssnano');
  15. //引入js压缩插件
  16. const uglifyjs = require('uglifyjs-webpack-plugin');
  17.  
  18. //webpack配置内容
  19. const config = {
  20.   //入口
  21.   entry:{
  22.     home:'./pages/lawSearchHomepage.js',
  23.     list:'./pages/lawSearchList.js'
  24.   },
  25.   //便于调试
  26.   devtool:'inline-source-map',
  27.   //服务
  28.   devServer:{
  29.     contentBase:'./build/lawSearchHomepage.html'
  30.   },
  31.   //loader模块
  32.   module:{
  33.     rules: [
  34.       {//ES6
  35.       test:/\.js$/,
  36.       loader:'babel-loader',
  37.       // exclude:__dirname+'node_modules',//不对这个进行babel转换，这里边已经打包好，这样能减少打包时间
  38.       // include:__dirname+'src'这里的src是你要编译的js文件的目录,
  39.       exclude:path.resolve(__dirname,'node_modules'),
  40.       include:path.resolve(__dirname,'pages'),
  41.       query:{//若在package.json中定义了这个presets，则这边可以删掉
  42.         presets:['es2015']
  43.       }
  44.      },
  45.      {//Jquery
  46.       test: require.resolve('jquery'),
  47.       use: [{
  48.        loader: 'expose-loader',
  49.        options: 'jQuery'
  50.       },{
  51.        loader: 'expose-loader',
  52.        options: '$'
  53.       }]
  54.      },
  55.      {//CSS
  56.        test:/\.css/,
  57.        use:ExtractTextPlugin.extract({
  58.          use:['css-loader']
  59.        })
  60.      },
  61.      {//Sass
  62.        test:/\.scss/,
  63.        use:ExtractTextPlugin.extract({
  64.          fallback:"style-loader",
  65.          use:['css-loader','sass-loader']
  66.        },)
  67.      },
  68.      {//处理模块html
  69.       test: /\.html$/,
  70.       use: 'html-loader'
  71.      },
  72.      {//图片
  73.       test: /\.(jpg|png|gif)$/,
  74.       use: {
  75.         loader: 'file-loader',
  76.         options: {
  77.           outputPath: 'images'
  78.         }
  79.       }
  80.      },
  81.      //字体图标
  82.       {
  83.       test: /\.(eot|svg|ttf|woff|woff2)\w*/,
  84.       loader: 'file-loader'
  85.      }
  86.     ]
  87.   },
  88.   //插件
  89.   plugins: [
  90.     //清空build文件下的多余文件
  91.     new CleanWebpackPlugin(['build']),
  92.     //将css单独打包插件
  93.     new ExtractTextPlugin({
  94.      filename:"[name].css",//制定编译后的文件名称
  95.      allChunks:true,//把分割的块分别打包
  96.     }),
  97.     //html单独导出插件——首页
  98.     new HtmlWebpackPlugin({
  99.       filename:'lawSearchHomepage.html',//输出后的文件名称
  100.       template:'./pages/lawSearchHomepage.html',//模版页面路径
  101.       favicon:'./pages/images/favicon.ico',//页签图标
  102.       chunks:['home'],//需要引入的js文件名称
  103.       inject: true,
  104.       hash:true,//哈希值
  105.       minify: {//压缩
  106.         removeComments: true,
  107.         collapseWhitespace: true
  108.       }
  109.     }),
  110.     //html单独导出插件——列表页
  111.     new HtmlWebpackPlugin({
  112.       filename:'lawSearchList.html',
  113.       template:'./pages/lawSearchList.html',
  114.       favicon:'./pages/images/favicon.ico',
  115.       chunks:['list'],
  116.       inject: true,
  117.       hash:true,
  118.       minify: {
  119.         removeComments: true,
  120.         collapseWhitespace: true
  121.       }
  122.     }),
  123.     //压缩css
  124.     new optimizeCss({
  125.      assetNameRegExp: /\.style\.css$/g,
  126.      cssProcessor: cssnano,
  127.      cssProcessorOptions: { discardComments: { removeAll: true } },
  128.      canPrint: true
  129.     }),
  130.     //压缩js
  131.     new uglifyjs()
  132.   ],
  133.   //压缩优化css
  134.   optimization: {
  135.     // minimize: true,
  136.     minimizer: [new optimizeCss({})]
  137.   },
  138.   //出口
  139.   output:{
  140.     filename: '[name].bundle.js',
  141.     path: path.resolve(__dirname,'build')    
  142.   }
  143. }
  144.  
  145. module.exports = config;

如果在打包过程中报模块没有定义错误，那就再安装一次，实在不行，直接删了node_modules文件，重新npm install一下。

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

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

webpack热门文章

  • 最新 umi4-max 如何使用 webpack5 联邦模块
  • 使用webpack配置react-hot-loader热加载局部更新
  • vue-cli3+ts+webpack实现多入口多出口功能
  • JS逆向实战21——某查查webpack密码加密
  • 使用webpack打包ts代码的实现
  • 详解webpack之图片引入-增强的file-loader：url-loader
  • webpack的移动端适配方案小结
  • webpack拆分压缩css并以link导入的操作步骤
  • 详解Webpack loader 之 file-loader
  • 详解webpack+ES6+Sass搭建多页面应用

    • webpack推荐文章

  • Webpack 学习笔记
  • 最新 umi4-max 如何使用 webpack5 联邦模块
  • 自学 TypeScript 第三天 使用webpack打包 TS 代码
  • 使用webpack打包ts代码的实现
  • vue-cli webpack配置文件分析
  • webpack-mvc 传统多页面组件化开发详解
  • 使用 Webpack 分离数据的正确方法
  • 新手快速上手webpack4打包工具的使用详解
  • 一次Webpack配置文件的分离实战记录
  • 详解Webpack loader 之 file-loader

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号