webapck4配置文件無(wú)效怎么辦

這篇文章給大家分享的是有關(guān)webapck4配置文件無(wú)效怎么辦的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括巴彥淖爾網(wǎng)站建設(shè)、巴彥淖爾網(wǎng)站制作、巴彥淖爾網(wǎng)頁(yè)制作以及巴彥淖爾網(wǎng)絡(luò)營(yíng)銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，巴彥淖爾網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到巴彥淖爾省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

webpack@4.x的變化

先來說下webpack4和之前版本里一些主要的變化：

1、webpack不再支持node v4，這是因?yàn)樾碌膚ebpack和附屬插件使用了es6的語(yǔ)法，v4版本對(duì)es6不是很到位，所以，就不伺候了。

2、開始采取約定優(yōu)于配置的思路，webpack@4.x里把很多選項(xiàng)都設(shè)置了默認(rèn)值，比如入口就是./src，輸出目錄就是./dist，當(dāng)然如果你自己去設(shè)置，它也不會(huì)攔著。所以在用webpack@4.x的時(shí)候，我們甚至都可以沒有webpack.config.js這個(gè)配置文件也能一樣打包。

3、拆分了舊版本里的webpack，分成了用來處理邏輯的webpack和提供可執(zhí)行命令的webpack-cli，這也是有的同學(xué)把webpack裝成新版本以后會(huì)報(bào)找不到webpack-cli模塊這個(gè)錯(cuò)誤的原因。

4、添加了mode選項(xiàng)，用來區(qū)分編譯的環(huán)境，提供了development、production和none三個(gè)選項(xiàng)，理論上這個(gè)選項(xiàng)是強(qiáng)制指定的，其實(shí)不指定的話它也是有默認(rèn)值的，但會(huì)給出一個(gè)warning，官方這么強(qiáng)烈建議了，就顯式的指定一下吧。指定方式有兩種，一是在啟動(dòng)命令里：

./node_modules/.bin/webpack --mode production

另外一種就是在配置文件里指定，方式如下：

var config = {
  mode: 'production' // 可選development、production和none
}

5、配置上的變動(dòng)，類似刪除了commonChunksPlugin，用optimization來代替這種。還有l(wèi)oader的用法也和1.15.0不一樣了，但這個(gè)升級(jí)是在之前版本里就有的，不是webpack@4.x帶來的。

6、性能優(yōu)化，提高了打包性能。另外從webpack2起，引入了Tree-shaking機(jī)制來提出沒有被引用的模塊。它的原理是按著引用關(guān)系重新建立一個(gè)新的依賴樹，而沒有被引用的模塊就不會(huì)被打包到最后的代碼里。之前的壓縮優(yōu)化方式是先把所有模塊都掛到樹上，然后通過分析后，刪掉沒被引用的模塊。從字面意思來看，我覺得原來的方式更像在搖樹，把沒用的搖下來。這兩種方式最后壓縮完的結(jié)果可能類似，但設(shè)計(jì)思路完全是從兩個(gè)方向走的。

7、其他。以上這些就是一些比較主要的變化，更詳細(xì)的升級(jí)文檔可以參考下官方的說明：https://github.com/webpack/webpack/releases

前言

升級(jí)webpack4，一定要去看文檔，特別是 更新說明 ，不要自持用過原本webpack就自己開始折騰。折騰到后面，可能就默默流下眼淚了。

webpack4的變化

webpack-cli抽離

webpack-cli被單獨(dú)拆了出來，使用的時(shí)候如果只是全局裝了CLI，直接執(zhí)行的時(shí)候是可以的。

webpack --config ./config/webpack.dev.js

如果是寫在npm hook里面會(huì)發(fā)現(xiàn)有點(diǎn)問題：

//package.json
"scripts": {
  "dev": "webpack --config ./config/webpack.dev.js"
 }
//shall
npm run dev

此時(shí)就會(huì)給提示：

One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
 - webpack-command (https://github.com/webpack-contrib/webpack-command)
   A lightweight, opinionated webpack CLI.
We will use "npm" to install the CLI via "npm install -D".
Which one do you like to install (webpack-cli/webpack-command):

如果是我沒有全局裝，我肯定會(huì)意識(shí)到要選一個(gè)，這個(gè)坑關(guān)鍵是我全局裝了。所以就在那折騰半天。

其實(shí)官方文檔開頭就說明了。

npm install webpack webpack-cli --save-dev

安裝完成之后，繼續(xù)執(zhí)行發(fā)現(xiàn)有warning：

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

mode規(guī)則

配置規(guī)則：必須在production 和 development之間選擇一種,以便webpack 使用相應(yīng)模式的內(nèi)置優(yōu)化

1. production支持所有類型的優(yōu)化已生成最優(yōu)bundles

2. development允許注釋、提示和eval devtool devtool的差別可以參考這里

3. production不支持watching、development針對(duì)快速增量重建進(jìn)行了優(yōu)化

4. production支持 module concatenating（Scope Hoisting）即作用域提升，可以將模塊打包在一個(gè)函數(shù)里，這樣減少了函數(shù)聲明，文件體積也會(huì)減小。 詳細(xì)參考看這里

5. process.env.NODE_ENV被設(shè)置用來區(qū)分環(huán)境（僅僅在構(gòu)建代碼而非config里面)

6. 有一個(gè)hidden none mode的模式可以禁用所有內(nèi)容

用法：

1、配置文件中：

module.exports = {
entry: Entrys,
mode: 'development'
}

2、cli 參數(shù)傳入

webpack --mode=development

兩種方式都是可行的，不過我遇到過一個(gè)很坑的問題，困擾自己好幾天，最后知道真相的自己眼淚掉下來后面再提這個(gè)問題。

零配置快速開始

因?yàn)橐恢北煌虏叟渲锰?，加上parcel給的壓力，webpack4也支持零配置打包了。

如果沒有配置文件，會(huì)默認(rèn)以./src/index.js作為entry開始打包。

如果配置了webpack.config.js或者指定了--config 的文件路徑，則依據(jù)對(duì)應(yīng)配置文件開始。

問題表現(xiàn)

在webpack.config.js中配置了entry、mode等相關(guān)屬性，配置文件如下：

module.export = {
  mode:'production',
  entry:{
    app:'./src/test.js',
    index:'./src/test.js'
  },
  output: {
    path: process.cwd() + '/dist',
    filename: '[name].[hash].js',
    chunkFilename: '[name].[chunkhash].js',
    crossOriginLoading: 'anonymous'
  },
  cache: true,
  devtool: 'cheap-source-map',
  externals: {
    jquery: 'jQuery'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)?$/,
        include: [
          path.resolve(__dirname, "../src")
        ],
        exclude: [
          'node_modules',
          path.resolve(__dirname, "../node_modules")
        ],
        use: [
          {
            loader: 'babel-loader',
            options:{
              presets:['es2015']
            } 
          }
        ]
      }
    ]
  },
  resolve: {
    modules: [
      'node_modules'
    ],
    extensions: [".js", ".json", ".jsx", ".css"],
  },
  devServer: {
    proxy: { // proxy URLs to backend development server
      '/api': 'http://localhost:3000'
    },
    contentBase: path.resolve(__dirname, "../dist"),
    hot: true,
    open:true
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title:'test'
    }),
    new webpack.HotModuleReplacementPlugin()
  ]
}

package.json命令配置:

"scripts": {
  "build": "webpack --config webpack.prod.js"
 }
//執(zhí)行打包
npm run build

發(fā)現(xiàn)始終會(huì)有上面選擇mode類型的提示，這讓人不能接受，另外提示沒有./src/index.js文件，但是我的配置入口是別的文件，這樣讓人很莫名

ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/****'

本著跟著提示解決問題的原則，少文件那就建一個(gè)唄(后來發(fā)現(xiàn)這種思維有時(shí)候有用，有時(shí)候還真要慎重)，問題表現(xiàn)雖然一致，實(shí)質(zhì)可能有所不同。

新建之后是可以運(yùn)行了但是我們的配置文件好像沒起作用，

dist下的打包文件是默認(rèn)的main.js

而非我們指定的app和index

為了確保進(jìn)入配置文件，我打了幾個(gè)log，竟然都有輸出，說明進(jìn)去了，這問題就詭異了。

console.log(path.resolve(__dirname, './src')) //輸出正確路徑
module.export = {
    //*****//
  }

版本統(tǒng)一

初步猜想是版本問題，確實(shí)也有issue上提到過某些版本存在問題，對(duì)照著官方demo鎖定版本之后問題依然存在。

猜測(cè)：應(yīng)該是配置文件存在錯(cuò)誤

配置檢查

將官方最基本的配置拉進(jìn)來拷貝進(jìn)來試了一下，依然存在問題沒能解決。

猜測(cè)：本地的環(huán)境存在問題，npm，node等版本

查看之后發(fā)現(xiàn)版本都是滿足的。

運(yùn)行demo

將demo拉到本地并啟動(dòng)，demo正常打包，說明本地環(huán)境是ok的。那么問題就明顯了，我的配置文件或者項(xiàng)目搭建有問題，對(duì)照著demo的配置項(xiàng)，配置項(xiàng)沒有明顯問題，這樣的話將，配置信息放入到demo中去，修改之后發(fā)現(xiàn)起作用，我又重新審視了下我的配置文件，不僅僅局限于配置部分的時(shí)候，發(fā)現(xiàn)

//我的寫法，這樣webpack拿到的就是undefined了。
module.export
//別人的demo
module.exports

webpack的兼容處理

webpack會(huì)將 webpack --config 傳入的文件與本身默認(rèn)配置進(jìn)行merge，保證本身打包不出錯(cuò)。為了證明我們的推論，將配置文件只剩下output屬性，并加上src/index.js

module.exports = {
  output: {
    path: process.cwd() + '/dist1',
    // 直接的入口模zzz塊名
    filename: '[name].js',
    // 非入口模塊，也就是不需要打包到一起的，但又可能會(huì)用到，
    // 這不就是按需加載的么
    chunkFilename: '[name].[chunkhash].js',
    crossOriginLoading: 'anonymous'
  }
}

執(zhí)行之后會(huì)發(fā)現(xiàn)打包到/dist1下面。所以上面寫錯(cuò)module.exports的時(shí)候，走的完全是默認(rèn)配置。前面的log打在了module.exports之前執(zhí)行是正確的。

感謝各位的閱讀！關(guān)于“webapck4配置文件無(wú)效怎么辦”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

當(dāng)前標(biāo)題：webapck4配置文件無(wú)效怎么辦
標(biāo)題路徑：http://muchs.cn/article20/pdpsjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、定制開發(fā)、App開發(fā)、網(wǎng)站內(nèi)鏈、域名注冊(cè)、響應(yīng)式網(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í)需注明來源： 創(chuàng)新互聯(lián)