开坑webpack（一）：安装与简单使用

一、开始项目与配置（windows下）

新建项目并在项目目录下初始化环境：npm init -y
安装工具：npm install --save-dev webpack webpack-dev-server（在webpack4中还需要安装webpack-cli，在webpack3是和webpack本身在一个包中的）
新建配置文件（名字不能换）：copy NUL webpack.config.js
这个创建命令的意思是将空设备复制到webpack.config.js文件中，相当于创建了没有内容的空文件夹。
简单配置webpack
```
module.exports = {
    entry: './index.js',
    output: {
        path:__dirname+'/dist',
        filename:'bundle.js'
    }
}
```
entry：模块化module.export入口文件，有几个页面就有几个entry，如果是单页面spa，一个entry足够。
output：输出，path是输出路径，__dirname是nodejs全局变量，表示当前目录，filename是打包后的文件名。
安装loaders：npm install style-loader css-loader
这是webpack的一大特色，可以将一些浏览器不能原生支持的文件通过loaders编译成浏览器可以支持的文件。借助webpack style-loader和css-loader我们可以在.js文件中引入css文件并让样式生效。
在webpack.config.js文件中添加loaders模块，如下：
```
module.exports = {
    entry: __dirname + '/index.js',
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js'
    },
    module: { //这是添加的部分
        rules: [{
            test: /\.css$/,
            loader: ['style-loader', 'css-loader']
        }]
    }
}
```
模块下定义rules是一个数组，用于loader需要的东西，可以定义多个对象是一个loader。
test：正则匹配文件后缀
loader：指定采用哪个loader，注意从右往左执行，即先执行css-loader。
- css-loader：处理css中的url，以及定位
- style-loader：将css文件采用js动态写入html页面

二、hello webpack

在项目根目录下分别创建三个文件：

index.js

//  index.js：入口文件。指定入口文件后，webpack将自动识别项目所依赖的其它文件
require('./style.css'); /* es5 */
document.write('hello world')

style.css

// style.css
body {
    background-color: green;
}

index.html

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>hello webpack</title>
    <script src="dist/bundle.js"></script>
</head>
<body>

</body>
</html>

编译运行

假如已经全局安装webpack-dev-server（npm install -g webpack-dev-server），则直接命令webpack-dev-server就可以开启。
或者可以在package.json文件中添加script，如下：

"scripts": {
    "start": "webpack-dev-server --progress",
    "build": "webpack --progress",
    "test": "echo \"Error: no test specified\" && exit 1"
},

通过npm run build来编译，通过npm run start开启服务器。
编译完成后使用到的只有index.html和dist/bundle.js。

三、参考

webpack使用之基础篇