99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

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

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務，包含不限于網(wǎng)站建設、成都網(wǎng)站建設、遼源網(wǎng)絡推廣、小程序定制開發(fā)、遼源網(wǎng)絡營銷、遼源企業(yè)策劃、遼源品牌公關、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們大的嘉獎；創(chuàng)新互聯(lián)為所有大學生創(chuàng)業(yè)者提供遼源建站搭建服務，24小時服務熱線：028-86922220，官方網(wǎng)址：www.cdcxhl.com

目的：是為了分享一下使用過程中，用到的插件、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;

分享題目：詳解webpack+ES6+Sass搭建多頁面應用-創(chuàng)新互聯(lián)
鏈接地址：http://www.ef60e0e.cn/article/depodd.html