详解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 相关文章推荐
JavaScript 学习初步 入门教程
Mar 25 Javascript
javascript动画浅析
Aug 30 Javascript
Js放到HTML文件中的哪个位置有什么区别
Aug 21 Javascript
javascript鼠标滑动评分控件完整实例
May 13 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
Feb 21 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
Aug 01 Javascript
深入理解js 中async 函数的含义和用法
May 13 Javascript
Vue slot用法(小结)
Oct 22 Javascript
详解angularjs跨页面传参遇到的一些问题
Nov 01 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
May 16 Javascript
koa-passport实现本地验证的方法示例
Feb 20 Javascript
vue通过过滤器实现数据格式化
Jul 20 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
PHP通用分页类page.php[仿google分页]
2008/08/31 PHP
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
探讨php define()函数及defined()函数使用详解
2013/06/09 PHP
基于PHP输出缓存(output_buffering)的深入理解
2013/06/13 PHP
php计算指定目录下文件占用空间的方法
2015/03/13 PHP
注释PHP和html混合代码的小技巧(分享)
2016/11/03 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
php删除二维数组中的重复值方法
2018/03/12 PHP
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
setTimeout的延时为0时多个浏览器的区别
2012/05/23 Javascript
JS 操作Array数组的方法及属性实例解析
2014/01/08 Javascript
js跳转页面方法总结
2014/01/29 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
Bootstrap每天必学之缩略图与警示窗
2015/11/29 Javascript
深入分析javascript中console命令
2016/08/14 Javascript
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
elementUI select组件value值注意事项详解
2019/05/29 Javascript
微信小程序实现pdf、word等格式文件上传的方法
2019/09/10 Javascript
jquery实现直播弹幕效果
2019/11/28 jQuery
js实现缓动动画
2020/11/25 Javascript
利用python批量修改word文件名的方法示例
2017/10/17 Python
详解python的四种内置数据结构
2019/03/19 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
CSS3的resize属性使用初探
2015/09/27 HTML / CSS
买卖协议书范本
2014/04/21 职场文书
奥巴马胜选演讲稿
2014/05/15 职场文书
财务管理专业毕业生求职信
2014/06/02 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
python - timeit 时间模块
2021/04/06 Python
python 实现图与图之间的间距调整subplots_adjust
2021/05/21 Python