webpack+ES6+Sass搭建多頁面應用

webpack同以前的gulp相比，gulp屬於非模塊化打包工具，webpack屬於模塊化打包工具，二者的優劣這裏不作過多分析（可自行百度）。

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

安裝webpack,這裏不作詳細描述，直接去官網吧

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

代碼結構以下

下面單獨說幾個難點

一、打包多頁面，使用到的插件是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;

二、單獨打包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,//把分割的塊分別打包
}),

三、處理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'] } },

四、處理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: '$' }] },

五、壓縮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({})] },

六、壓縮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一下。