webpack入門實踐

//webpack.config.js

const path = require('path'),
      webpack = require('webpack');

const HtmlWebpackPlugin = require('html-webpack-plugin'),
      ExtractTextPlugin = require("extract-text-webpack-plugin"),
      CopyWebpackPlugin = require('copy-webpack-plugin'),
      CleanWebpackPlugin = require('clean-webpack-plugin');

const extractCSS = new ExtractTextPlugin('css/[name]_[contenthash:8].css');

var distPath = path.join(__dirname,'dist'),
    srcPath = path.join(__dirname,'src');

module.exports = {
    //入口文件
    entry:  {
        common : srcPath + "/pages/common/common.js",
        index : srcPath + "/pages/index/index.js",
        ui : srcPath + "/pages/ui/ui.js"
    },
    //輸出目錄
    output: {
        publicPath: '/ptah-ui/dist/',
        path: distPath,
        filename: 'js/[name]_[chunkhash:8].js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                loader: extractCSS.extract([ 'css-loader'])
            },
            {
                test: /\.less/,
                loader: extractCSS.extract([ 'css-loader','less-loader'])
            },
            {
                test: /.art$/,
                use: [ 'art-template-loader' ]
            },
            {
                test: /\.(png|jpg|gif)$/,
                loader : 'file-loader?name=images/[name]_[hash:8].[ext]'
            },
            {
                test: /\.(htm|html)$/i,
                loader: 'html-withimg-loader'
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        extractCSS,
        new CopyWebpackPlugin([{
            from : srcPath +'/lib',
            to : distPath + '/lib'
        }]),
        new HtmlWebpackPlugin({
            template: srcPath + '/pages/index/index.html',
            chunks: ['index','common'],
            filename: 'pages/index.html'
        }),
        new HtmlWebpackPlugin({
            template: srcPath + '/pages/ui/ui.html',
            chunks: ['ui','common'],
            filename: 'pages/ui.html'
        })
    ]
}

前提條件：已安裝nodejs

一、新建ptah-ui文件夾，執行npm init初始化package.json，新建項目文件夾和文件，個人最終目錄結構以下：

二、安裝webpack: 執行 npm install --save-dev webpack

1. --save 添加到package.json中dependencies下
2. --save-dev 添加到package.json中devDependencies下
3. 執行npm install 會下載dependencies和devDependencies中的模塊

三、新建 webpack.config.js，配置入口文件和輸出目錄

//入口文件
entry:  {
    common : srcPath + "/pages/common/common.js",
    index : srcPath + "/pages/index/index.js",
    ui : srcPath + "/pages/ui/ui.js"
},
//輸出目錄
output: {
    publicPath: '/ptah-ui/dist/',
    path: distPath,
    filename: 'js/[name]_[chunkhash:8].js'
},

注意hash與chunkhash的區別。這樣打包後的文件就自動帶入了md5文件簽名了，能夠解決緩存和增量更新的問題。

四、編譯模板輸出html（能夠include）

因爲是多頁面，頭部導航是公共的，想經過include簽入進去。

html-webpack-plugin

五、解決圖片路徑問題（html中圖片路徑）

html-withimg-loader

六、獨立生成css文件

extract-text-webpack-plugin

七、公共文件copy

copy-webpack-plugin

八、支持less

九、公共css提取成單獨文件

（思路：單獨創建一個common.js，裏面引入公共文件，做爲chuck）

代碼下載（https://github.com/xuriliang/...）