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

作者:路陆 时间:2024-07-28 05:03:47 

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,安 * abel、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一下。

来源:http://www.cnblogs.com/hess/p/9896197.html

标签:webpack,ES6,Sass,多页面
0
投稿

猜你喜欢

  • 浅谈Python中的函数(def)及参数传递操作

    2023-01-20 20:13:54
  • Mysql忘记root密码怎么办

    2024-01-19 02:29:22
  • 分享101个MySQL调试与优化技巧

    2024-01-20 23:36:58
  • Python面向对象实现方法总结

    2022-03-11 08:50:41
  • 关于多元线性回归分析——Python&SPSS

    2023-03-11 17:03:34
  • python import 引用上上上级包的三种方法

    2021-09-22 12:56:38
  • python实现在列表中查找某个元素的下标示例

    2023-08-20 07:16:38
  • tf.nn.conv2d与tf.layers.conv2d的区别及说明

    2021-03-29 13:36:53
  • 数据库手边系列:SQL Server数据表信息

    2009-05-24 18:26:00
  • Sql注入工具_动力节点Java学院整理

    2024-01-20 00:02:10
  • python实现括号匹配的思路详解

    2023-08-24 16:50:30
  • Python Matplotlib初阶使用入门教程

    2022-03-17 21:02:33
  • php mail to 配置详解

    2024-05-13 09:22:51
  • python抓取网页中的图片示例

    2022-02-24 20:07:22
  • ThinkPHP 3.2 版本升级了哪些内容

    2023-09-05 04:22:04
  • ASP运行出错:缺少对象: xmlDoc.documentElement错误解决方法

    2012-11-30 20:40:52
  • Python 树表查找(二叉排序树、平衡二叉树)

    2021-01-27 03:06:20
  • python 获取计算机的网卡信息

    2023-08-11 21:12:06
  • 验证码的最高境界

    2008-05-08 14:17:00
  • python读取当前目录下的CSV文件数据

    2022-04-06 16:50:35
  • asp之家 网络编程 m.aspxhome.com