webpack初入

序言：前面已經倒騰了grunt、gulp、fis3,今天來經過一個例子玩玩webpack!最終預覽

經過下面的例子，可以瞭解如下幾點：

一、如何安裝webpack

二、如何使用webpack

三、如何使用loader

四、如何使用webpack搭建本地web服務器

1、如何安裝(這裏使用的cnpm，我的感受比npm快)

輸入如下命令進行全局安裝：

cnpm install webpack -g

此時webpack已經生效以下圖，(提示：一樣基於node，請自行安裝node.)

2、使用(主要是2個配置文件：package.json和webpack.config.js)

一、命令行進入demo03根目錄：(該demo目錄以下)

二、輸入命令：cnpm init，自動快速package.json文件，此時demo03根目錄下回自動生成一個package.json文件。

三、命令行輸入：cnpm install --save-dev webpack，安裝webpack依賴包;

四、命令繼續輸入：cnpm install --save-dev css-loader，安裝css-loader依賴;

五、命令輸入：cnpm install --save-dev style-loader，安裝style-loader依賴;

六、在js目錄下建立一個entry.js文件輸入以下代碼：

require('../css/style.css');//導入css
document.write("<h1><span>Life</span><span>is a</span><span>gradient</span></h1>");

七、在demo03根目錄下建立一個webpack.config.js文件並輸入以下配置：

/**
 * Created by Administrator on 2016/11/10.
 */
var webpack = require('webpack');
module.exports = {
    entry: './js/entry.js',//指定的入口文件
    output: {//輸出
        path: './js/',//輸出路徑
        filename: 'bundle.js'//輸出文件名
    },
    module: {
        loaders: [
            {test: /\.css$/, loader: 'style!css'}
        ]
    }
}

八、此時配置已經完成，命令行輸入：webpack，以下：

編譯結束後會在js目錄下自動生成一個bundle.js文件，在html內運入該js文件並用瀏覽器打開以下：

九、搭建本地服務器：

繼續命令行輸入：cnpm install webpack-dev-server -g，全局安裝webpack本地服務器，

等待安裝完成後輸入下面命令啓動服務器：webpack-dev-server，默認地址：http://localhost:8080/或者http://localhost:8080/webpack-dev-server/

此時http://localhost:8080/下的頁面跟本地打開的是同樣的。

更詳細的參考地址：www.jianshu.com/p/42e11515c10f#