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，看下一章的简介。