在此之前我們一起學(xué)習(xí)了簡單的webpack打包，多依賴文件打包，以及樣式打包。下面我們來學(xué)習(xí)webpack的一些規(guī)范。

• 首先初始化一下項(xiàng)目，生成一個package.json文件。

npm init

可以看到package.json中有我們項(xiàng)目的一些信息和項(xiàng)目安裝了哪些依賴等【如：上一篇說到的style-loader,style.loader】。

• 然后運(yùn)行npm install

npm install

npm install將按照package.json安裝所需要的組件放在生成的node_modules文件夾中，并生成鎖定版本的package-lock.json文件

• 接著我們將項(xiàng)目文件進(jìn)行一下整理
  1.新建一個src目錄，在src目錄下再新建css和js文件，將對應(yīng)的js，css移入文件夾中；
  2.新建一個src的同級文件dist文件，來存放打包后的文件bundle.js；
  3.修改index.html，main.js中對應(yīng)的路徑變化；
  4.src同級下新建一個webpack.config.js【webpack配置文件固定名稱寫法】文件，至此文件目錄結(jié)構(gòu)如下：

圖1：目錄結(jié)構(gòu)

5.下面我們就在webpack.config.js中進(jìn)行一些配置，具體如下：

*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內(nèi)容的加載器
            }
        ]
    }
}

6.配置后，我們就可以省略main.js中的css引入加載器的內(nèi)容了，具體如下：

*main.js*
require('../css/style.css')
var tryStr = require('./subMethod.js')

document.write(tryStr())

7.然后我們?yōu)榱撕蜕弦还?jié)內(nèi)容不同，我們可以修改一下style.css以及subMethod.js內(nèi)容；
8.最后我們可以直接在控制臺運(yùn)行webpack,然后提示打包成功，點(diǎn)開index.html查看效果:

圖2：控制臺輸出

圖3：運(yùn)行index.html