WebPack使用(一)

标签（空格分隔）:工具

---

webpack特点

1. 丰富的插件
2. 大量的加载器
3. 代码分割,提供按需加载的能力
4. 发布工具

webpack的优势

• 以commonJS形式书写脚本,对AMD/CMD的支持也很全面
• 能被模块化的不仅仅是JS
• 打包,压缩,混淆,图片转base64
• 扩展性强,插件完善,支持热插拔.

webpack的安装

1.全局安装命令

$ npm install webpack -g

2.使用webpack

$ npm init  # 会自动生成一个package.json文件
$ npm install webpack --save-dev #将webpack增加到package.json文件中

3.安装开发的工具

$ npm install webpack-dev-server --save-dev

webpack的配置

webpack的配置文件为webpack.config.js

例子:

var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
    //插件项
    plugins: [commonsPlugin],
    //页面入口文件配置
    entry: {
        index : './src/js/page/index.js'
    },
    //入口文件输出配置
    output: {
        path: 'dist/js/page',
        filename: '[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'}
        ]
    },
    //其它解决方案配置
    resolve: {
        root: 'E:/github/flux-example/src', //绝对路径
        extensions: ['', '.js', '.json', '.scss'],
        alias: {
            AppStore : 'js/stores/AppStores.js',
            ActionType : 'js/actions/ActionType.js',
            AppAction : 'js/actions/AppAction.js'
        }
    }
};

1. plugins 是插件项，这里我们使用了一个 CommonsChunkPlugin的插件，它用于提取多个入口文件的公共脚本部分，然后生成一个 common.js 来方便多页面之间进行复用。
2. entry 是页面入口文件配置，output 是对应输出项配置 （即入口文件最终要生成什么名字的文件、存放到哪里）
3. module.loaders 是最关键的一块配置。它告知 webpack 每一种文件都需要使用什么加载器来处理。 所有加载器需要使用npm来加载
4. 最后是 resolve 配置，配置查找模块的路径和扩展名和别名（方便书写）

一个简单的示例

1.配置文件

var webpack = require('webpack');
module.exports = {
    entry: "./index.js",
    output: {
        path: __dirname,
        filename: "bundle.js"//index与bundle文件平级与index.html平级
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    }
};

2.html文件

3.安装加载器css-loader

$ npm install css-loader style-loader --save-dev

4.入口文件编写

//在index.js中写入
document.write("看看如何让它工作！");

两种运行方式

1. 直接运行webpack命令,然后打开index.html

$ webpack

2. 安装服务器插件

$ npm install webpack-dev-server -g
$ webpack-dev-server --progress --colors

打开localhost:8080即可运行