Webpack前端工程化

发表于 更新于

概述

构成

  1. entry:定义整个编译过程的起点
  2. output:定义整个编译过程的终点
  3. module:定义模块module的处理方式
  4. plugin:对编译完成后的内容进行二次加工
  5. resolve.alias:定义模块的别名

安装

先全局安装webpack和webpack-cli

1
npm install webpack webpack-cli -g
1
2
3
4
mkdir webpacktest
cd webpacktest
npm init
npm install webpack webpack-cli -D

配置示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
module.exports = {
    entry:'./index.js',
    output:{
        path:path.resolve(process.cwd(),'dist/'),
        filename:'[name].js'
    },
    resolve:{
        alias:{jquery:'src/lib/jquery.js'}
    },
    plugins:[
        new WebpackNotifierPlugin()
    ],
    module:{
        loaders:[{
            test:/\.js[x]?$/,
            exclude:/node_modules/,
            loader:'babel-loader'
        },{
            test:/\.less$/,
            loaders:['style-loader','css-loader','less-loader']
        },{
            test:/\.html$/,
            loader:'html-loader?'+JSON.stringify({minimize:false})
        }]
    }
}