webpack.dev.conf.js詳解

時間 2019-11-12

標籤 webpack.dev.conf.js webpack dev conf 詳解欄目 JavaScript 简体版

原文原文鏈接

轉載自：https://www.cnblogs.com/ye-hcj/p/7087205.htmlcss

webpack.dev.conf.js詳解html

//引入當前目錄下的utils.js文件模塊
var utils = require('./utils')
//node的path模塊 var path = require('path')
//內置模塊 var webpack = require('webpack')
//引入config目錄下的index.js文件 var config = require('../config')
//進行合併對象，相同項目會進行覆蓋 var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
// 下面是一個自動生成html的插件，可以把資源自動加載到html文件中
// 詳情請看 (1） var HtmlWebpackPlugin = require('html-webpack-plugin')
// 下面這個插件是用來把webpack的錯誤和日誌收集起來，漂亮的展現給用戶
// 詳情請看 (2) var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')

//=======================靜態編譯ssi資源==================================

var SSICompileWebpackPlugin = require('ssi-webpack-plugin') // add hot-reload related code to entry chunks
// Object.keys(obj) Object.keys() 方法會返回一個由一個給定對象的自身可枚舉屬性組成的數組，
//數組中屬性名的排列順序和使用  循環遍歷該對象時返回的順序一致 （二者的主要區別是 一個 for-in 循環還會枚舉其原型鏈上的屬性）。
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
// 下面這個結果就是把webpack.base.conf.js中的入口entry改爲以下配置 
// app: ['./build/dev-client','./src/main.js'] //即數組多加了一個元素 baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) })
 // 下面是合併配置對象，將這個配置文件特有的配置添加替換到base配置文件中 module.exports = merge(baseWebpackConfig, { module: {
　　// 下面是把utils配置中的處理css相似文件的處理方法拿過來，而且不生成cssMap文件 rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) }, // cheap-module-eval-source-map is faster for development
// devtool是開發工具選項，用來指定如何生成sourcemap文件，cheap-module-eval-source-map此款soucemap文件性價比最高

  devtool: '#source-map', plugins: [
// DefinePlugin內置webpack插件，專門用來定義全局變量的，下面定義一個全局變量 process.env 而且值是以下
 /* 'process.env': { NODE_ENV: '"development"' }
 這樣的形式會被自動轉爲 'process.env': '"development"' 
各位騷年看好了，development若是不加雙引號就當作變量處理，程序會報錯 */ new webpack.DefinePlugin({ 'process.env': config.dev.env }), //提取公共代碼塊 babel-polyfill只能有一個實例
    new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', chunks: ['index', 'admin'], minChunks: function (module, count) { return ( module.resource && 
          /\.js$/.test(module.resource) && module.resource.indexOf( path.join(__dirname, '../node_modules') ) === 0 ) } }), // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
    new webpack.HotModuleReplacementPlugin(),
// 下面這個插件比較簡單，就是當webpack編譯錯誤的時候，來中端打包進程，防止錯誤代碼打包到文件中，你還不知道 new webpack.NoEmitOnErrorsPlugin(), // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', favicon: './src/assets/images/favicon.ico', excludeChunks: ['admin'], inject: true }), new HtmlWebpackPlugin({ filename: 'admin.html', template: 'admin.html', favicon: './src/assets/images/favicon.ico', excludeChunks: ['index'], inject: true }), new SSICompileWebpackPlugin({ publicPath:'', localBaseDir:'C:/Developer/newWorkspace', minify:false }), new FriendlyErrorsPlugin() ] })for...in

註釋

(1)html-webpack-plugin插件是用來生成html文件的，有很靈活的配置項，下面是基本的一些用法
plugins: [
    new HtmlWebpackPlugin(), // Generates default index.html 
    new HtmlWebpackPlugin({  // Also generate a test.html 
      filename: 'test.html', // 生成的文件的名稱
      title: 'Custom template', // 文件的標題
      template: 'my-index.ejs' //能夠指定模塊html文件
    })
]
下面是模板文件my-index.ejs的內容 
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title><%= htmlWebpackPlugin.options.title %></title> //這裏使用特殊的表示插入配置項的title
  </head>
  <body>
  </body>
</html>
(2)friendly-errors-webpack-plugin插件，把webpack編譯出來的錯誤展現給咱們，方便調試
   安裝 npm install friendly-errors-webpack-plugin --save-dev
   基本使用 
   plugins: [
       new FriendlyErrorsWebpackPlugin(),
   ]
   注意點，使用這個插件要遵照下點
       您須要關閉全部的錯誤日誌記錄，將webpack配置靜默選項設置爲true
       也就是遵循如下三點便可
       在使用webpack-dev-middleware插件，關於這個插件的解釋在個人dev-sever-js配置文件中有解釋，設置如下內容
        app.use(require('webpack-dev-middleware')(compiler, {
            quiet: true, // 必須設置
            publicPath: config.output.publicPath,
        }));
       使用webpack-dev-server時設置以下
       {
           devServer: {
               quiet: true
           }
       }
       使用webpack-hot-middleware中間件，關於這個插件的解釋也在個人dev-server-js文章中
        app.use(require('webpack-hot-middleware')(compiler, {
            log: () => {}
        }));
    作到以上幾點，就能夠正常使用這個插件了，這個插件還有一些配置項，感興趣自行了解
(3) HotModuleReplacementPlugin解釋以下
    老哥們知道什麼是webpack模塊不
    webpack支持以下模塊
        CoffeeScript
        TypeScript
        ESNext (Babel)
        Sass
        Less
        Stylus
    這些模塊支持以下導入的方式
        ES2015 import 語句
        CommonJS require() 語句
        AMD define 和 require 語句
        css/sass/less 文件中的 @import 語句。
        樣式(url(...))或 HTML 文件(<img src=...>)中的圖片連接(image url)
    看到了把，webpack就是這麼強大，幾乎囊括了前端全部的東西
    這個插件的做用就是當你的程序在運行時，而你如今要替換、添加或刪除某個模塊，又不想從新加載頁面，
    這個插件幫助你實現無刷新加載，關於內部實現原理，其實有點意思，各位請自行查看

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。