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'
    }
}

修订后：

方法一：

1 module.exports={
2     entry:'./src/script/main.js',
3     output:{
4         // path:'./dist/js',
5         //方法一（最好不要这样做）
6          filename:'./dist/js/bundle2.js'
7     }
8 }

方法二：

 1 var path=require('path');
 2 module.exports={
 3     entry:'./src/script/main.js',
 4     output:{
 5         //方法二(注意dirname是有两个杠的)
 6 
 7         path:path.join(__dirname,'.dist/js'),
 8         filename:'bundle2.js'
 9     }
10 }

错误2

 1 var path=require('path');
 2 module.exports={
 3     entry:{
 4         main:'./src/script/main.js',
 5         a:'./src/script/a.js'
 6     },
 7     output:{
 8         path:path.join(__dirname,'./dist/js'),
 9         filename:'bundle3.js'
10     }
11 }

根据官方文档的描述，发现是webpack更新之后语法变了的原因，

 1 {
 2     entry: {
 3         a: "./a",
 4         b: "./b",
 5         c: ["./c", "./d"]
 6     },
 7     output: {
 8         path: path.join(__dirname, "dist"),
 9         filename: "[name].entry.js"
10     }
11 }

修改后：

 1 var path=require('path');
 2 module.exports={
 3     entry:{
 4         bundle3:['./src/script/a.js','./src/script/b.js']
 5 
 6     },
 7     output:{
 8         path:path.join(__dirname,'./dist/js'),
 9         filename:'[name].js'
10     }
11 }

最后生成一个bundle3.js文件。name只是一个占位符，最后生成的文件的命名应该是由entry中参数决定的，就是标红色那个名字。

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