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

webpack同之前的gulp相比，gulp属于非模块化打包工具，webpack属于模块化打包工具，两者的优

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');

//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一下。

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