webpack 練習筆記

1， 建立項目 webpack 

mkdir webpack

2, 初始化項目

npm init

3, 全局安裝webpack

npm install webpack -g

4, 使用

// 建立靜態文件
echo "靜態html文件  引入打包後的bundle.js" >index.tml
//JS入口文件
echo "document.write('It work')" >entry.js

// 使用webpack 打包

5， 增長一個模塊 module.js

entry.js 中的代碼，其它模塊會在運行 require 的時候再執行

6, loader  【Webpack 自己只能處理 JavaScript 模塊，若是要處理其餘類型的文件，就須要使用 loader 進行轉換。】

//建立style.css文件
echo "background:red;" >style.css
//entry.js 入口文件引入 style.js
require("!style!css!./style.css")
// 安裝css-loader
npm install css-loader --save-dev
// 安裝style-loader 【用css-loader解析css  而後用style-loader 加到index.html 中】
npm install style-loader --save-dev

7，配置文件 【webpack.config.js】

//添加webpack.config.js文件
echo "">webpack.config.js 

建立配置項

var webpack = require('webpack')

module.exports = {
    //入口文件
    entry: './entry.js',
    // 輸出文件
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: 'style!css' }
        ]
    }
}

另外style.css 引入方式

// entry.js
require("./style.css")

執行 webpack 

8,  插件

插件的使用通常是在 webpack 的配置信息 plugins 選項中指定。

Webpack 自己內置了一些經常使用的插件，還能夠經過 npm 安裝第三方插件。

引入方式

var webpack = require('webpack')

module.exports = {
    //入口文件
    entry: './entry.js',
    // 輸出文件
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: 'style!css' }
        ]
    },//插件項
    plugins: [
        new webpack.BannerPlugin('This file is created by lpt')
    ]
}

9，開發環境

固然，使用 webpack-dev-server 開發服務是一個更好的選擇。

它將在 localhost:8080 啓動一個 express 靜態資源 web 服務器，而且會以監聽模式自動運行 webpack，在瀏覽器打開 http://localhost:8080/  能夠瀏覽項目中的頁面和編譯後的資源輸出，而且經過一個 socket.io 服務實時監聽它們的變化並自動刷新頁面

// 顯示進度
 webpack --progress --colors
//不想沒次改動代碼都從新編譯一次文件  添加監聽
webpack --progress --colors --watch

使用webpack-dev-server

// 安裝webpack-dev-server
npm install webpack-save-dev
//運行
webpack-dev-server --progress --color
//訪問
localhost:8080

使用webpack-dev-server 熱更新

webpack-dev-server --inline --hot