webpack簡單的項目配置發生的錯誤

跟着視頻開始學習一些簡單的配置，然后發生了一些錯誤，在意料之外，但是又在情理之中。

1）新建一個webpackdemo目錄作為項目目錄

2）npm init 初始化

3）npm install webpack --save-dev安裝打包工具

4）建立src目錄放置源文件，建立dist目錄放置最終文件

5）新建一個webpack.config.js作為原始的配置文件，運行webpack的時候，會自動運行config文件，如果沒有config文件就會報錯。當然也可使用其他命名的文件比如webpack.dev.config.js

就必須運行  webpack --config webpack.dev.config.js

錯誤（微笑）

錯誤一

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

需要使用絕對路徑。

源main.js

module.exports={
    entry:'./src/script/main.js',
    output:{
        path:'./dist/js',
        filename:'bundle2.js'
    }
}

修訂后：

方法一：

module.exports={
    entry:'./src/script/main.js',
    output:{
        // path:'./dist/js',
        //方法一（最好不要這樣做）
         filename:'./dist/js/bundle2.js'
    }
}

 

方法二：

var path=require('path');
module.exports={
    entry:'./src/script/main.js',
    output:{
        //方法二(注意dirname是有兩個杠的)

        path:path.join(__dirname,'.dist/js'),
        filename:'bundle2.js'
    }
}

錯誤2

var path=require('path');
module.exports={
    entry:{
        main:'./src/script/main.js',
        a:'./src/script/a.js'
    },
    output:{
        path:path.join(__dirname,'./dist/js'),
        filename:'bundle3.js'
    }
}

根據官方文檔的描述，發現是webpack更新之后語法變了的原因，

{
    entry: {
        a: "./a",
        b: "./b",
        c: ["./c", "./d"]
    },
    output: {
        path: path.join(__dirname, "dist"),
        filename: "[name].entry.js"
    }
}

修改后：

var path=require('path');
module.exports={
    entry:{
        bundle3:['./src/script/a.js','./src/script/b.js']

    },
    output:{
        path:path.join(__dirname,'./dist/js'),
        filename:'[name].js'
    }
}

最后生成一個bundle3.js文件。name只是一個占位符，最后生成的文件的命名應該是由entry中參數決定的，就是標紅色那個名字。

 

總結：前端變化太快，還是需要自己去看官方文檔比較靠譜，至少官方給出的是標准，任何教程都是在作者本人的學習基礎上寫出來的，難免會有一些偏差。