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中参数决定的，就是标红色那个名字。

总结：前端变化太快，还是需要自己去看官方文档比较靠谱，至少官方给出的是标准，任何教程都是在作者本人的学习基础上写出来的，难免会有一些偏差。