详解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的offset、client、scroll使用方法详解
Dec 25 Javascript
Js 冒泡事件阻止实现代码
Jan 27 Javascript
javascript 实现子父窗体互相传值的简单实例
Feb 17 Javascript
基于jQuery插件实现点击小图显示大图效果
May 11 Javascript
jquery dataview数据视图插件使用方法
Dec 23 Javascript
vuejs绑定class和style样式
Apr 11 Javascript
详解JavaScript中return的用法
May 08 Javascript
Angularjs自定义指令Directive详解
May 27 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
Aug 14 Javascript
Vue 中如何正确引入第三方模块的方法步骤
May 05 Javascript
vue实现输入框自动跳转功能
May 20 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
Aug 14 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
destoon找回管理员密码的方法
2014/06/21 PHP
浅析php单例模式
2014/11/25 PHP
php输出图像的方法实例分析
2017/02/16 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
一个JavaScript操作元素定位元素的实例
2014/10/29 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
jQuery grep()方法详解及实例代码
2016/10/30 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
2016/12/19 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
2017/10/24 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
Vue组件Draggable实现拖拽功能
2018/12/01 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
Python实现的矩阵类实例
2017/08/22 Python
python学生信息管理系统(初级版)
2018/10/17 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
pycharm中import呈现灰色原因的解决方法
2020/03/04 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
解决pycharm下pyuic工具使用的问题
2020/04/08 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
python mongo 向数据中的数组类型新增数据操作
2020/12/05 Python
利用Storage Event实现页面间通信的示例代码
2018/07/26 HTML / CSS
定制别致的瑜伽垫:Sugarmat
2019/06/21 全球购物
斯洛伐克香水和化妆品购物网站:Parfemy-Elnino.sk
2020/01/28 全球购物
会展中心部门工作职责
2013/11/27 职场文书
三八妇女节活动总结
2014/05/04 职场文书
保险公司开门红口号
2014/06/21 职场文书
学校食堂标语
2014/10/06 职场文书
2015元旦节寄语
2014/12/08 职场文书
【海涛解说】史上最给力比赛,挑战DOTA极限
2022/04/01 DOTA