详解webpack+ES6+Sass搭建多页面应用


Posted in Javascript onNovember 05, 2018

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

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

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

代码结构如下

详解webpack+ES6+Sass搭建多页面应用

下面单独说几个难点

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

//引入路径插件
const path = require('path');
//引入导出html插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

const config = {
  //入口
  entry:{
  home:'./pages/lawSearchHomepage.js',
  list:'./pages/lawSearchList.js'
  },
  //出口
  output:{
  filename: '[name].bundle.js',
  path: path.resolve(__dirname,'build')    
  },
//插件
  plugins: [
    //html单独导出插件——首页
    new HtmlWebpackPlugin({
      filename:'lawSearchHomepage.html',//输出后的文件名称
      template:'./pages/lawSearchHomepage.html',//模版页面路径
      favicon:'./pages/images/favicon.ico',//页签图标
      chunks:['home'],//需要引入的js文件名称
      inject: true,
      hash:true,//哈希值
      minify: {//压缩
        removeComments: true,
        collapseWhitespace: true
      }
    }),
    //html单独导出插件——列表页
    new HtmlWebpackPlugin({
      filename:'lawSearchList.html',
      template:'./pages/lawSearchList.html',
      favicon:'./pages/images/favicon.ico',
      chunks:['list'],
      inject: true,
      hash:true,
      minify: {
        removeComments: true,
        collapseWhitespace: true
      }
    })
 ] 
}
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

//引入导出css插件
const ExtractTextPlugin = require('extract-text-webpack-plugin');

//loader
{//CSS
  test:/\.css/,
  use:ExtractTextPlugin.extract({
    use:['css-loader']
  })
},
{//Sass
   test:/\.scss/,
   use:ExtractTextPlugin.extract({
    fallback:"style-loader",
    use:['css-loader','sass-loader']
   },)
}
//plugins
//将css单独打包插件
new ExtractTextPlugin({
   filename:"[name].css",//制定编译后的文件名称
   allChunks:true,//把分割的块分别打包
}),

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

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

4、处理jquery,安装expose-loader

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

第二种通过loader

//loader
{//Jquery
   test: require.resolve('jquery'),
   use: [{
     loader: 'expose-loader',
     options: 'jQuery'
   },{
     loader: 'expose-loader',
     options: '$'
   }]
},

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

//引入压缩css的插件
const optimizeCss = require('optimize-css-assets-webpack-plugin');
//引入cssnano插件
const cssnano = require('cssnano');

//plugins
plugins:[
  new optimizeCss({
     assetNameRegExp: /\.style\.css$/g,
     cssProcessor: cssnano,
     cssProcessorOptions: { discardComments: { removeAll: 
       true } },
     canPrint: true
  }),    
],
//压缩优化css,不写这个css还是没压缩,不知道为啥
optimization: {
    // minimize: true,
  minimizer: [new optimizeCss({})]
},

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

用的插件uglifyjs-webpack-plugin

//引入js压缩插件
const uglifyjs = require('uglifyjs-webpack-plugin');

//plugins
new uglifyJs()

我的package.json中安装的插件

"devDependencies": {
  "babel": "^6.23.0",
  "babel-core": "^6.26.3",
  "babel-loader": "^7.1.5",
  "babel-preset-es2015": "^6.24.1",
  "clean-webpack-plugin": "^0.1.19",
  "css-loader": "^1.0.0",
  "cssnano": "^4.1.7",
  "expose-loader": "^0.7.5",
  "extract-text-webpack-plugin": "^4.0.0-beta.0",
  "file-loader": "^2.0.0",
  "font-awesome-webpack": "^0.0.5-beta.2",
  "html-loader": "^0.5.5",
  "html-webpack-plugin": "^3.2.0",
  "jquery": "^3.3.1",
  "node-sass": "^4.9.4",
  "optimize-css-assets-webpack-plugin": "^5.0.1",
  "postcss-loader": "^3.0.0",
  "sass-loader": "^7.1.0",
  "style-loader": "^0.23.1",
  "typeahead.js": "^0.11.1",
  "uglifyjs-webpack-plugin": "^2.0.1",
  "url-loader": "^1.1.2",
  "webpack": "^4.23.1",
  "webpack-cli": "^3.1.2",
  "webpack-dev-server": "^3.1.10"
 }

webpack.config.js里的代码(完整版)

//引入路径插件
const path = require('path');
//引入导出html插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
//引入清除插件
const CleanWebpackPlugin = require('clean-webpack-plugin');
//引入导出css插件
const ExtractTextPlugin = require('extract-text-webpack-plugin');
//引入webpack
const webpack = require('webpack');
//引入压缩css的插件
const optimizeCss = require('optimize-css-assets-webpack-plugin');
//引入cssnano插件
const cssnano = require('cssnano');
//引入js压缩插件
const uglifyjs = require('uglifyjs-webpack-plugin');

//webpack配置内容
const config = {
  //入口
  entry:{
    home:'./pages/lawSearchHomepage.js',
    list:'./pages/lawSearchList.js'
  },
  //便于调试
  devtool:'inline-source-map',
  //服务
  devServer:{
    contentBase:'./build/lawSearchHomepage.html'
  },
  //loader模块
  module:{
    rules: [
      {//ES6
      test:/\.js$/,
      loader:'babel-loader',
      // exclude:__dirname+'node_modules',//不对这个进行babel转换,这里边已经打包好,这样能减少打包时间
      // include:__dirname+'src'这里的src是你要编译的js文件的目录,
      exclude:path.resolve(__dirname,'node_modules'),
      include:path.resolve(__dirname,'pages'),
      query:{//若在package.json中定义了这个presets,则这边可以删掉
        presets:['es2015']
      }
     },
     {//Jquery
      test: require.resolve('jquery'),
      use: [{
       loader: 'expose-loader',
       options: 'jQuery'
      },{
       loader: 'expose-loader',
       options: '$'
      }]
     },
     {//CSS
       test:/\.css/,
       use:ExtractTextPlugin.extract({
         use:['css-loader']
       })
     },
     {//Sass
       test:/\.scss/,
       use:ExtractTextPlugin.extract({
         fallback:"style-loader",
         use:['css-loader','sass-loader']
       },)
     },
     {//处理模块html
      test: /\.html$/,
      use: 'html-loader'
     },
     {//图片
      test: /\.(jpg|png|gif)$/,
      use: {
        loader: 'file-loader',
        options: {
          outputPath: 'images'
        }
      }
     },
     //字体图标
      {
      test: /\.(eot|svg|ttf|woff|woff2)\w*/,
      loader: 'file-loader'
     }
    ]
  },
  //插件
  plugins: [
    //清空build文件下的多余文件
    new CleanWebpackPlugin(['build']),
    //将css单独打包插件
    new ExtractTextPlugin({
     filename:"[name].css",//制定编译后的文件名称
     allChunks:true,//把分割的块分别打包
    }),
    //html单独导出插件——首页
    new HtmlWebpackPlugin({
      filename:'lawSearchHomepage.html',//输出后的文件名称
      template:'./pages/lawSearchHomepage.html',//模版页面路径
      favicon:'./pages/images/favicon.ico',//页签图标
      chunks:['home'],//需要引入的js文件名称
      inject: true,
      hash:true,//哈希值
      minify: {//压缩
        removeComments: true,
        collapseWhitespace: true
      }
    }),
    //html单独导出插件——列表页
    new HtmlWebpackPlugin({
      filename:'lawSearchList.html',
      template:'./pages/lawSearchList.html',
      favicon:'./pages/images/favicon.ico',
      chunks:['list'],
      inject: true,
      hash:true,
      minify: {
        removeComments: true,
        collapseWhitespace: true
      }
    }),
    //压缩css
    new optimizeCss({
     assetNameRegExp: /\.style\.css$/g,
     cssProcessor: cssnano,
     cssProcessorOptions: { discardComments: { removeAll: true } },
     canPrint: true
    }),
    //压缩js
    new uglifyjs()
  ],
  //压缩优化css
  optimization: {
    // minimize: true,
    minimizer: [new optimizeCss({})]
  },
  //出口
  output:{
    filename: '[name].bundle.js',
    path: path.resolve(__dirname,'build')    
  }
}

module.exports = config;

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

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

Javascript 相关文章推荐
JS跨域代码片段
Aug 30 Javascript
JS(JQuery)操作Array的相关方法介绍
Feb 11 Javascript
jQuery绑定事件-多种实现方式总结
May 09 Javascript
微信小程序 实现点击添加移除class
Jun 12 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
Jun 28 Javascript
React-Native中禁用Navigator手势返回的示例代码
Sep 09 Javascript
js+html获取系统当前时间
Nov 10 Javascript
对angularJs中2种自定义服务的实例讲解
Sep 30 Javascript
javascript for循环性能测试示例
Aug 07 Javascript
原生js实现随机点名
Jul 05 Javascript
原生js+css实现tab切换功能
Sep 17 Javascript
js闭包和垃圾回收机制示例详解
Mar 01 Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 #Javascript
小程序实现选择题选择效果
Nov 04 #Javascript
小程序实现单选多选功能
Nov 04 #Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 #Javascript
微信小程序实现登录注册tab切换效果
Dec 29 #Javascript
原生js实现淘宝放大镜效果
Oct 28 #Javascript
微信小程序如何获取手机验证码
Nov 04 #Javascript
You might like
大师制作的中短波矿石收音机
2020/04/02 无线电
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
javascript模拟实现C# String.format函数功能代码
2013/11/25 Javascript
addEventListener()与removeEventListener()解析
2017/04/20 Javascript
select2 ajax 设置默认值,初始值的方法
2018/08/09 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
用node开发并发布一个cli工具的方法步骤
2019/01/03 Javascript
使用webpack构建应用的方法步骤
2019/03/04 Javascript
微信小程序实现录音时的麦克风动画效果实例
2019/05/18 Javascript
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
layui table 表格模板按钮的实例代码
2019/09/21 Javascript
使用Vue实现简单计算器
2020/02/25 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
vue 函数调用加括号与不加括号的区别
2020/10/29 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
2021/01/07 Javascript
详解template标签用法(含vue中的用法总结)
2021/01/12 Vue.js
python局域网ip扫描示例分享
2014/04/03 Python
python 网络编程详解及简单实例
2017/04/25 Python
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
Python实现压缩和解压缩ZIP文件的方法分析
2017/09/28 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
python ubplot使用方法解析
2020/01/10 Python
keras打印loss对权重的导数方式
2020/06/10 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
下面代码从性能上考虑,有什么问题
2015/04/03 面试题
大四学生思想汇报
2014/01/13 职场文书
小学一年级学生评语
2014/04/22 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
防邪知识进家庭活动方案
2014/08/26 职场文书
团代会开幕词
2015/01/28 职场文书
大学生自荐信范文
2015/03/05 职场文书
幼儿园小班工作总结2015
2015/04/25 职场文书
毕业典礼致辞
2015/07/29 职场文书