在此之前我们一起学习了简单的webpack打包，多依赖文件打包，以及样式打包。下面我们来学习webpack的一些规范。
- 首先初始化一下项目，生成一个package.json文件。
npm init
可以看到package.json中有我们项目的一些信息和项目安装了哪些依赖等【如：上一篇说到的style-loader,style.loader】。
- 然后运行npm install
npm install
npm install将按照package.json安装所需要的组件放在生成的node_modules文件夹中，并生成锁定版本的package-lock.json文件
- 接着我们将项目文件进行一下整理
1.新建一个src目录，在src目录下再新建css和js文件，将对应的js，css移入文件夹中；
2.新建一个src的同级文件dist文件，来存放打包后的文件bundle.js；
3.修改index.html，main.js中对应的路径变化；
4.src同级下新建一个webpack.config.js【webpack配置文件固定名称写法】文件，至此文件目录结构如下：
图1：目录结构
5.下面我们就在webpack.config.js中进行一些配置，具体如下：
*webpack.config.js*
module.exports = {
entry: './src/js/main.js', //打包的入口文件
output: {
path: __dirname + '/dist', //打包后输出的文件夹路径
filename: 'bundle.js' //打包的后生成的文件名
},
// 模块加载
module: {
loaders: [
{
test:/\.css$/, //识别所有的.css文件
loader: 'style-loader!css-loader' //凡是.css文件，自动加载loader内容的加载器
}
]
}
}
6.配置后，我们就可以省略main.js中的css引入加载器的内容了，具体如下：
*main.js*
require('../css/style.css')
var tryStr = require('./subMethod.js')
document.write(tryStr())
7.然后我们为了和上一节内容不同，我们可以修改一下style.css以及subMethod.js内容；
8.最后我们可以直接在控制台运行webpack,然后提示打包成功，点开index.html查看效果:
图2：控制台输出
图3：运行index.html
