webpack基礎

webpack是一款模塊加載器兼打包工具，它能把各種資源，例如JS（含JSX）、coffee、樣式（含less/sass）、圖片等都作為模塊來使用和處理。

安裝

在node環境下，通過npm安裝webpack

npm install webpack -g

啟動webpack

webpack     // 執行一次開發的編譯
webpack -p  // 對打包后的文件進行壓縮
webpack -w  // 提供watch方法，實時進行打包更新
webpack -d  // 提供source map，方便調試
webpack --config XXX.js   //使用另一份配置文件（比如webpack.config2.js）來打包

配置文件(webpack.config.js)

var webpack = require('webpack');
var commonsPlugin = webpack.optimize.CommonsChunkPlugin;
 
module.exports = {      
    entry: {
        index : './index.js'
    },   
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'build.[name].js'
    },
    module: {       
        loaders: [
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.js$/, loader: 'jsx-loader?harmony' },
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    },
　　plugins: [new commonsPlugin("commons.js")]
};

1、entry頁面入口文件配置，output 是對應輸出項配置

entry: {
    page1: "./page1.js",    
    page2: "./page2.js"
},
output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'build.[name].js'
}

最終會生成一個build.page1.js和build.page2.js，並存放在./dist文件下。

模塊加載器

1、style-loader css-loader

安裝：npm install --save-dev style-loader css-loader

{ test: /\.css$/, loader: 'style-loader!css-loader' }

style-loader表示將所有的計算后的樣式加入頁面中，css-loader表示使用類似@import 和 url(...)的方法實現 require()的功能。二者組合在一起使你能夠把樣式表嵌入webpack打包后的JS文件中。

2、url-loader

安裝：npm install --save-dev url-loader

{test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}

url-loader可以用來打包css中引用的圖片,如上，在小於8K的圖片將直接以base64的形式內聯在代碼中

3、babel-loader

安裝：npm install --save-dev babel-loader babel-core babel-preset-es2015 

{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/}

將所有目錄下的es6代碼轉譯為es5代碼，但不包含node_modules目錄下的文件

3、sass-loader

安裝：npm install --save-dev sass-loader

 

{ test: /\.scss$/, loader: 'style!css!sass'}

配置webpack-dev-server

構建本地服務器，自動刷新新監測代碼，

安裝：npm install --save-dev webpack-dev-server

//webpack.config.js
module.exports = {
  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true,
  }
}

//package.json
"scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
}

 

插件plugins

1、CommonsChunkPlugin自定義公共模塊提取

用於提取多個入口文件的公共部分，然后生成一個common.js來方便多頁面之間進行利用。

var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js'); 

plugins: [
        commonsPlugin
]

2、extract-text-webpack-plugin 獨立打包樣式文件

有時候可能希望項目的樣式能不要被打包到腳本中，而是獨立出來作為.css，然后在頁面中以<link>標簽引入。這時候我們需要 extract-text-webpack-plugin 來幫忙：

安裝：npm install --save-dev extract-text-webpack-plugin

var ExtractTextPlugin = require("extract-text-webpack-plugin");

plugins: [    
    new ExtractTextPlugin('[name].css', {allChunks: true})
],
module: {
    loaders: [
        { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") },
        { test: /\.scss$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader') },
    ]
}