webpack学习（四）

在此之前我们一起学习了简单的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

webpack学习（四）

推荐阅读更多精彩内容