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/...）