在项目中使用webpack

1.新建一个项目,我的放在F盘中

2.使用 npm init 命令初始化这个目录

3.使用命令:npm install webpack -save-dev 进行安装webpack

4.新建src和dist两个文件夹

接着使用编译器打开这个目录,我的是HBuilder

然后在src中新建两个文件夹和在根目录下创建一个index.html文件,

1)新建index.html文件

2)在script文件下创建main.js文件

3)添加wepack.config.js文件,如果想直接执行webpack这个命令进行打包,需要进行配置,默认情况下,执行这个命令会去执行wepack.config.js这个文件

4)执行webpack --mode development命令进行打包

查看目录dist,发现,从入口进去的main.js已经被打包放在dist下的js文件夹下,bundle.js就是main.js被打包后生成的文件,查看bundle.js代码的尾部,发现我们写的代码已经被完整打包进去

5 . 问题: 如果我们把webpack这个命令默认的webpack.config.js名称改为了webpack.dev.config.js .那么应该执行webpack这个命令的时候,默认寻找执行webpack.config.js,但是现在不存在这个文件夹了,执行命令就会报错.如下

执行webpack命令,如下图,可以看到找不到入口文件,已经一些命令无法识别并执行的错误

这个问题应该如何解决呢?

打开package.json,在scripts中添加webpack配置,如下

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack": "webpack --config webpack.dev.config.js --progress --display-modules --display-reason --colors --mode development"
},

接着执行命令 npm run webpack

再次执行:

6.接下来了解一下entry(简单来说是入口路径)

它有三种写法

第一种(打包单个)

1)直接给出一个字符串路径.这种只能进行打包了单个文件.用法 entry : string 缺点:扩展或缩放配置的灵活性不大

module.exports = {

entry: './src/script/main.js'

};

或者(前者是简写):

module.exports = {

entry: {

main : './src/script/main.js',

a:'./src/script/a.js',

}

};

这种写法的时候,如果output给的filename是固定的,同一个,那么后一个会把前一个覆盖,它们被打包后生成的单个的文件,如果打包生成的文件名重复了,只会把前一个覆盖,如果想要生成单个的文件,可以修改filename的值,

接着执行命令: npm run webpack

查看项目,发现,已经单独生成了两个打包文件(a.js需要你手动在script中先创建)

[name]表示占位符,如下图

第二种:多个入口打包成一个文件 entry : array,有多个文件被同时打包进一个同文件中.

使用数组的形式:

module.exports = {
   entry: ['./src/script/main.js','./src/script/a.js'],
   output: {
       path : __dirname +"/dist/js",
       filename: 'bundle.js'
   }

}

执行命令npm run webpack-test

查看项目:

bundle.js代码中,可以看到这两个js文件被一起打包进了同一个文件中:

自动化生成项目中的html页面

1.在上面的基础上修改webpack.dev.config.js

2.执行命令 npm run webpack 进行打包

查看目录:

3.在根目录下的index.js引用打包后的文件

a.js原来是:

接着我们修改a.js代码

然后重新打包

发现原来的a.js的文件名已经发生改变了,而main.js的内容没有被修改,他的chunkhash值还是之前的,也就是说,filename打包生成的文件,的占位符[chunkname]随着代码的改变而发生改变,它具有唯一值,那么问题来,a.js的打包文件生成的代码是随着它的源文件的改变和发生变化,我们在index.js引用打包后的文件名一直发生改变, 如果路径文件不相同,那岂不是找不到文件?

这个时候,我们可以通过插件来解决

首先命令安装: npm install html-webpack-plugin --save-dev