webpack基本配置

webpack基本配置

1.关于webpack.config.js

首先我们先建立这样的目录



文件说明：

src ： 放置源文件的目录

dist ： 放置打包后文件的目录

index.html ： 初始化页面

webpack.config.js ： webapck的配置文件

1.1 webpack.config.js的说明

webapck的配置文件， (具体的配置在文档 API—>configuration，http://webpack.github.io/docs/configuration.html )为何建立webpack.config.js ，是因为在命令行中执行webpack会默认寻找目录下的webpack.config.js，以webpack.config.js的配置去运行。

当然也可以webpack –config hcd.js 执行hcd.js中的配置

webpack.config.js配置：

//模块化输出
module.exports = {
//入口文件,一般使用绝对路径，__dirname为webpack.config.js所在的文件夹
entry:__dirname+'/src/script/main.js',
// 打包后的文件
output:{
//打包后文件在./dist/js的文件夹中
path:__dirname+'/dist/js',
//打包后文件的名称
filename:'bundle.js'
}
}

再在命令行中执行 webpack 命令：



结果目录为：



Webpack的基本配置—案例1

2.通过package.json简便的执行命令

首先目录和前面是一样的，webapck.config.js的配置也是一样的。

只不过可以通过在package.jsond的script中设置便捷的执行命令的方式。

{
"name": "webpack-hcd",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack":"webpack --config webpack.config.js --progress --display-modules --colors"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^3.6.0"
}
}

解释：

“webpack”:”webpack –config webpack.config.js –progress –display-modules –colors”

webpack –config webpack.config.js ： 执行webpack.config.js

–progress ： 查看过程

–display-modules ： 打包了哪些模块

–colors ： 彩色的

执行命令行：

npm run webpack



Webpack的基本配置—案例1

3.entry

在上面的例子中，我们已经知道，entry是入口文件的意思，webpack关于入口文件有3种方式

API：http://webpack.github.io/docs/configuration.html#entry

1.引入单个文件

entry: "./src/js/main.js",

2.引入数组

entry:['./src/js/main.js','./src/js/hello.js']

可以看到一共打包了【0】【1】【2】3个模块，【0】是multi，【1】，【2】才是我们想要打包的内容，这是为何呢，我们来看一下打包后的文件bundle.js



可以看到其实【0】模块是用来引用我们的【1】【2】模块的，将【1】【2】打包到一起去，这样我们就可以使用了

Webpack的基本配置—案例3

3．entry对象

这种传递entry对象的方式多应用于多页面， chunk：path（模块：路径）

page1页面使用”./page1“打包后的文件，page2页面使用的是[“./entry1”, “./entry2”]打包后的文件

entry: {
page1: "./page1",
page2: ["./entry1", "./entry2"]
},

但是如果不更改output将会导致两个文件打包后输出的文件名字一样，造成了重复覆盖，所以要更改output

Webpack的基本配置—案例4

4.output

API：http://webpack.github.io/docs/configuration.html#output

影响编译输出的选项。output选项告诉Webpack如何将编译的文件写入磁盘。请注意，虽然可以有多个entry点，但output只指定一个配置。

1.output.filename

指定磁盘上每个输出文件的名称。你不能在这里指定绝对路径！该output.path选项确定磁盘上写入文件的位置。filename仅用于命名单个文件。

单个入口文件：

{
entry: './src/app.js',
output: {
filename: 'bundle.js',
path: __dirname + '/build'
}
}

多个引入文件：

如果您的配置创建多个单个“块”（如多个入口点或使用像CommonsChunkPlugin这样的插件），则应使用替换来确保每个文件具有唯一的名称。

[name] 被块的名称所取代。（就是entry对象的chunk）

[hash] 被编译的哈希替换。（在编译的时候可以看到）

[chunkhash] 被块的哈希替代。（块的哈希值如同MD5一样，只要代码不一样，哈希就不同）

{
entry: {
app: './src/app.js',
search: './src/search.js'
},
output: {
filename: '[name].js',
path: __dirname + '/build'
}
}

例如：

//模块化输出
module.exports = {
//入口文件,这里采用entry对象的方式，分别将main.js和hellow.js打包
entry:{
main:'./src/script/main.js',
hello:'./src/script/hellow.js'
},
// 打包后的文件
output:{
//打包后文件在./dist/js的文件夹中
path:__dirname+'/dist/js',
//打包后文件的名称为entry的chunk名称-编译的哈希值
filename:'[name]-[hash].js'
}
}

编译过程：



可以看到打包成了两个文件 （因为编译的哈希一样所以后面的是一样的）



当然可以采用【name】-【chunkhash】这样产生的文件名就完全不一样了，【chunkhash】就如同是MD5一样，是完全不同的，哪怕是同一个js只要代码发生变化【chunkhash】就会不同，这是非常有用的，我们一般只上线我们更改的js文件。

Webpack的基本配置—案例4

2. output.path

输出目录为绝对路径（必需）。

5.问题

在上面的讲解中我们可以看到，可以通过编译打包不同的js文件，但是如果通过【name】-【chunkhash】的方式产生的js文件的名字是不一定的，导致我们html在引入js文件时会非常的麻烦，所以我们需要引入插件html-webpack-plugin，看下一章的简介。