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

2019-11-19 12:34:49

字体：大中小

来源：转载

供稿：网友

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

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

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

代码结构如下

下面单独说几个难点

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');//pluginsplugins:[  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');//pluginsnew 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');//引入webpackconst 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一下。

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

上一篇：微信小程序tabbar底部导航

下一篇：浅谈vux之x-input使用以及源码解读