詳解webpack+ES6+Sass搭建多頁面應(yīng)用

更新時間：2018年11月05日 08:24:25 作者：路陸

這篇文章主要介紹了webpack+ES6+Sass搭建多頁面應(yīng)用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

webpack同之前的gulp相比，gulp屬于非模塊化打包工具，webpack屬于模塊化打包工具，兩者的優(yōu)劣這里不做過多分析（可自行百度）。

目的：是為了分享一下使用過程中，用到的插件、loader、遇到的各種問題以及解決辦法，最后會附上最終代碼。

在這個項目中，用 webpack打包css、scss、js、圖片文件、jquery、第三方插件、字體圖標，編譯es6、壓縮html、壓縮js、壓縮css ，基本涵蓋了常用的東西。

代碼結(jié)構(gòu)如下

下面單獨說幾個難點

1、打包多頁面，使用到的插件是html-wepack-plugin ， html-loader ，也就是你有多少個頁面，就有多少個入口，也就寫多少個模版文件。當(dāng)然，頁面過多時，可以考慮遍歷處理。

//引入路徑插件
const path = require('path');
//引入導(dǎo)出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單獨導(dǎo)出插件——首頁
    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單獨導(dǎo)出插件——列表頁
    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，因為每個頁面要引入相對應(yīng)的css文件，所以，在js入口文件里通過require('./lawSearchHomepage.scss')引如對應(yīng)的scss文件，打包后css文件會單獨打包，并通過link的形式引入html

//引入導(dǎo)出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轉(zhuǎn)換，這里邊已經(jīng)打包好，這樣能減少打包時間
   // 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
  }),    
],
//壓縮優(yōu)化css,不寫這個css還是沒壓縮，不知道為啥
optimization: {
    // minimize: true,
  minimizer: [new optimizeCss({})]
},

6、壓縮js，一般的情況下，js默認就是壓縮狀態(tài)，但是在壓縮完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');
//引入導(dǎo)出html插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
//引入清除插件
const CleanWebpackPlugin = require('clean-webpack-plugin');
//引入導(dǎo)出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配置內(nèi)容
const config = {
  //入口
  entry:{
    home:'./pages/lawSearchHomepage.js',
    list:'./pages/lawSearchList.js'
  },
  //便于調(diào)試
  devtool:'inline-source-map',
  //服務(wù)
  devServer:{
    contentBase:'./build/lawSearchHomepage.html'
  },
  //loader模塊
  module:{
    rules: [
      {//ES6
      test:/\.js$/,
      loader:'babel-loader',
      // exclude:__dirname+'node_modules',//不對這個進行babel轉(zhuǎn)換，這里邊已經(jīng)打包好，這樣能減少打包時間
      // 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單獨導(dǎo)出插件——首頁
    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單獨導(dǎo)出插件——列表頁
    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()
  ],
  //壓縮優(yōu)化css
  optimization: {
    // minimize: true,
    minimizer: [new optimizeCss({})]
  },
  //出口
  output:{
    filename: '[name].bundle.js',
    path: path.resolve(__dirname,'build')    
  }
}

module.exports = config;

如果在打包過程中報模塊沒有定義錯誤，那就再安裝一次，實在不行，直接刪了node_modules文件，重新npm install一下。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: