簡(jiǎn)介

為黃梅等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及黃梅網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、黃梅網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

看《深入淺出webpack》總結(jié)一下常用的webpack的屬性的含義并加了一些自己的鏈接，寫(xiě)在一個(gè)文件下更能有全局感受，更能理解各個(gè)屬性中間的關(guān)系，重點(diǎn)要關(guān)注entry,output,resolve,module, plugins幾部分

配置示例

這并不是一個(gè)拿來(lái)可用的配置，主要是為了更好理解常用的一些webpack屬性的作用，所以每一行都有注釋，放到一起，更能看到每一個(gè)屬性在其中的作用

module.exports = {
  // __dirname值為所在文件的目錄，context默認(rèn)為執(zhí)行webpack命令所在的目錄
  context: path.resolve(__dirname, 'app'),
  // 必填項(xiàng)，編譯入口，webpack啟動(dòng)會(huì)從配置文件開(kāi)始解析,如下三種(還有一種動(dòng)態(tài)加載entry的方式就是給entry傳入一個(gè)函數(shù)，這個(gè)在項(xiàng)目比較大，頁(yè)面很多的情況下可以優(yōu)化編譯時(shí)間)
  entry: './app/entry', // 只有一個(gè)入口，入口只有一個(gè)文件
  entry: ['./app/entry1', './app/entry2'], // 只有一個(gè)入口，入口有兩個(gè)文件
    // 兩個(gè)入口
  entry: {
    entry1: './app/entry1',
    entry2: './app/entry2'
  },
  // 輸出文件配置
  output: {
    // 輸出文件存放的目錄，必須是string類型的絕對(duì)路徑
    path: path.resolve(__dirname, 'dist'),
    // 輸出文件的名稱
    filename: 'bundle.js',
    filename: '[name].js', // 配置了多個(gè)入口entry是[name]的值會(huì)被入口的key值替換，此處輸出文件會(huì)輸出的文件名為entry1.js和entry2.js
    filename: [chunkhash].js, // 根據(jù)chunk的內(nèi)容的Hash值生成文件的名稱，其他只還有id，hash，hash和chunkhash后面可以使用:number來(lái)取值，默認(rèn)為20位，比如[name]@[chunkhash:12].js,
    // 文件發(fā)布到線上的資源的URL前綴，一般用于描述js和css位置，舉個(gè)例子，打包項(xiàng)目時(shí)會(huì)導(dǎo)出一些html,那么html里邊注入的script和link的地址就是通過(guò)這里配置的
    publicPath: "https://cdn.example.com/assets/", // CDN（總是 HTTPS 協(xié)議）
    publicPath: "http://cdn.example.com/assets/", // CDN (協(xié)議相同)
    publicPath: "/assets/", // 相對(duì)于服務(wù)(server-relative)
    publicPath: "assets/", // 相對(duì)于 HTML 頁(yè)面
    publicPath: "../assets/", // 相對(duì)于 HTML 頁(yè)面
    publicPath: "", // 相對(duì)于 HTML 頁(yè)面（目錄相同）
    // 當(dāng)需要構(gòu)建的項(xiàng)目可以被其他模塊導(dǎo)入使用，會(huì)用到libraryTarget和library
    library: 'xxx', // 配置導(dǎo)出庫(kù)的名稱，但是和libraryTarget有關(guān)，如果是commonjs2默認(rèn)導(dǎo)出這個(gè)名字就沒(méi)啥用
    // 從webpack3.1.0開(kāi)始，可以為每個(gè)target起不同的名稱
    library: {
      root: "MyLibrary",
      amd: "my-library",
      commonjs: "my-common-library"
    },
    libraryTarget: 'umd', // 導(dǎo)出庫(kù)的類型，枚舉值: umd、commonjs2、commonjs，amd、this、var(默認(rèn))、assign、window、global、jsonp(區(qū)別查看補(bǔ)充2)
    // 需要單獨(dú)導(dǎo)出的子模塊，這樣可以直接在引用的時(shí)候使用子模塊，默認(rèn)的時(shí)候是_entry_return_
    libraryExport: 'default', // __entry_return_.default
    libraryExport: 'MyModule', // __entry_return_.MyModule
    libraryExport: ['MyModule', 'MySubModule '], // 使用數(shù)組代表到指定模塊的取值路徑 __entry_return_.MyModule.MySubModule
    // 配置無(wú)入口的chunk在輸出時(shí)的文件名稱，但僅用于在運(yùn)行過(guò)程中生成的Chunk在輸出時(shí)的文件名稱，這個(gè)應(yīng)該一般和插件的導(dǎo)出有關(guān)，支持和filename一樣的內(nèi)置變量
    chunkFilename: '[id].js',
    // 是否包含文件依賴相關(guān)的注釋信息，不懂？請(qǐng)看補(bǔ)充3，在mode為development的是默認(rèn)為true
    pathinfo: true,
    // JSONP異步加載chunk，或者拼接多個(gè)初始chunk(CommonsChunkPlugin,AggressiveSplittingPlugin)
    jsonpFunction: 'myWebpackJsonp',
    // 此選項(xiàng)會(huì)向應(yīng)盤(pán)寫(xiě)入一個(gè)輸出文件，只在devtool啟動(dòng)了sourceMap選項(xiàng)時(shí)采用，默認(rèn)為`[file].map`,除了和filename一樣外還可以使用[file]
    sourceMapFilename: '[file].map',
    // 瀏覽器開(kāi)發(fā)者工具里顯示的源碼模塊名稱，此選項(xiàng)僅在 「devtool 使用了需要模塊名稱的選項(xiàng)」時(shí)使用，使用source-map調(diào)試，關(guān)聯(lián)模塊鼠標(biāo)移動(dòng)到上面的時(shí)候顯示的地址(截不到圖啊，醉了)，默認(rèn)這個(gè)值是有的，一般不需要關(guān)心
    devtoolModuleFilenameTemplate: 'testtest://[resource-path]'
  },
  // 配置模塊相關(guān)
  module: {
    rules: [ // 配置loaders
      {
        test: /\.jsx?$/, // 匹配規(guī)則，匹配文件使用，一般使用正則表達(dá)值
        include: [path.resolve(__dirname, 'app')], // 只會(huì)命中這個(gè)目錄文件
        exclude: [path.resolve(__diranme, 'app/demo-files')], // 命中的時(shí)候排除的目錄
        use: [ // 使用的loader，每一項(xiàng)為一個(gè)loader，從該數(shù)組的最后一個(gè)往前執(zhí)行
          'style-loader', // loader的名稱,這樣則是使用默認(rèn)配置，可以在后面加!配置屬性，也可以用下面方式
          {
            loader: 'css-loader', // loader的名稱
            options: {} // loader接受的參數(shù)
          }
        ],
        noParse: [ // 不用解析和處理的模塊 RegExp | [RegExp] | function（從 webpack 3.0.0 開(kāi)始）
          /jquery|lodash/
        ]
      }
    ]
  },
  // 配置插件，關(guān)于和loader區(qū)別見(jiàn)補(bǔ)充4
  plugins: [
   // 壓縮js的plugin
   new webpack.optimize.UglifyJsPlugin({
    compress: {
     warnings: false,
     drop_console: false,
    }
   }),
  ],
  // 解析文件引用的模塊的配置
  resolve: {
    // 模塊的根目錄,默認(rèn)從node_modules開(kāi)始找
    modules: [
      'node_modules',
      'browser_modules'
    ],
    // 模塊的后綴名，我們引入模塊有時(shí)候不寫(xiě)擴(kuò)展名，自動(dòng)補(bǔ)充擴(kuò)展名的順序如下
    extensions: ['.js', '.json', '.jsx', '.css'],
    // 模塊解析時(shí)候的別名
    alias: {
      // 那么導(dǎo)入模塊時(shí)則可以寫(xiě)import myComponent from '$component/myComponent';
      $component: './src/component',
      // 末尾加$精確匹配
      xyz$: path.resolve(__dirname, 'path/to/file.js')
    },
    // 此選項(xiàng)決定優(yōu)先使用package.json配置哪份導(dǎo)出文件，詳見(jiàn)補(bǔ)充5
    mainFields: ['jsnext:main', 'browser', 'main'],
    // 是否強(qiáng)制導(dǎo)入語(yǔ)句寫(xiě)明后綴
    enforceExtension: false,
    // 是否將符號(hào)鏈接(symlink)解析到它們的符號(hào)鏈接位置(symlink location)
    symlinks: true,
  },
  // 選擇一種 source map 格式來(lái)增強(qiáng)調(diào)試過(guò)程。不同的值會(huì)明顯影響到構(gòu)建(build)和重新構(gòu)建(rebuild)的速度。
  devtool: 'source-map',
  // 配置輸出代碼的運(yùn)行環(huán)境，可以為async-node，electron-main，electron-renderer，node，node-webkit，web(默認(rèn))，webworker
  target: 'web',
  externals: { // 使用來(lái)自于js運(yùn)行環(huán)境提供的全局變量
    jquery: 'jQuery'
  },
  // 控制臺(tái)輸出日志控制
  stats: {
    assets: true, // 添加資源信息
    colors: true, // 控制臺(tái)日志信息是否有顏色
    errors: true, // 添加錯(cuò)誤信息
    errorDetails: true, // 添加錯(cuò)誤的詳細(xì)信息（就像解析日志一樣）
    hash: true, // 添加 compilation 的哈希值
  },
  devServer: { // 本地開(kāi)發(fā)服務(wù)相關(guān)配置
    proxy: { // 代理到后端服務(wù)接口
      '/api': 'http://localhost:3000'
    },
    contentBase: path.join(__dirname, 'public'), // 配置devserver http服務(wù)器文件的根目錄
    compress: true, // 是否開(kāi)啟gzip壓縮
    hot: true, // 是否開(kāi)啟模塊熱交換功能
    https: false, // 是否開(kāi)啟https模式
    historyApiFallback: true, // 是否開(kāi)發(fā)HTML5 History API網(wǎng)頁(yè)，不太理解TODO
  },
  profile: true, // 是否捕捉webpack構(gòu)建的性能信息，用于分析是什么原因?qū)е碌臉?gòu)建性能不佳
  cache: false, // 緩存生成的 webpack 模塊和 chunk，來(lái)改善構(gòu)建速度。緩存默認(rèn)在觀察模式(watch mode)啟用。
  cache: {
    // 如果傳遞一個(gè)對(duì)象，webpack 將使用這個(gè)對(duì)象進(jìn)行緩存。保持對(duì)此對(duì)象的引用，將可以在 compiler 調(diào)用之間共享同一緩存：
    cache: SharedCache // let SharedCache = {}
  },
  watch: true, // 是否啟用監(jiān)聽(tīng)模式
  watchOptions: { // 監(jiān)聽(tīng)模式選項(xiàng)
    ignored: /node_modules/, // 不監(jiān)聽(tīng)的文件或文件夾，支持正則匹配，默認(rèn)為空
    aggregateTimeout: 300, 監(jiān)聽(tīng)到變化后，300ms再執(zhí)行動(dòng)作，節(jié)流，防止文件更新頻率太快導(dǎo)致重新編譯頻率太快
    poll: 1000 // 檢測(cè)文件是否變化，間隔時(shí)間
  },
  // 輸出文件的性能檢查配置
  perfomance: {
    hints: 'warning', // 有性能問(wèn)題時(shí)輸出警告
    hints: 'error', // 有性能問(wèn)題時(shí)輸出錯(cuò)誤
    hints: false, // 關(guān)閉性能檢查
    maxAssetSize: 200000, // 大文件大小，單位bytes
    maxEntrypointSize: 400000, // 大入口文件的大小，單位bytes
    // 此屬性允許 webpack 控制用于計(jì)算性能提示的文件。
    assetFilter: function(assetFilename) {
      return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
    }
  }
}

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

分享標(biāo)題：webpack常用配置總覽(小結(jié))-創(chuàng)新互聯(lián)
當(dāng)前地址：http://aaarwkj.com/article40/cogieo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、微信小程序、企業(yè)網(wǎng)站制作、域名注冊(cè)、App開(kāi)發(fā)、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)