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

時間  2019-12-09
標籤 webpack+es6+sass webpack sass 搭建 頁面 應用 简体版
原文   原文鏈接

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

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

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

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

代碼結構以下webpack

下面單獨說幾個難點es6

一、打包多頁面，使用到的插件是html-wepack-plugin，html-loader，也就是你有多少個頁面，就有多少個入口，也就寫多少個模版文件。固然，頁面過多時，能夠考慮遍歷處理。web

//引入路徑插件
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的形式引入htmlnpm

//引入導出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報錯）json

//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-loadergulp

第一種方法能夠經過在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一下。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程