webpack简单使用

关于webpack的介绍以及在ubuntu上的安装过程请在[安装webpack](http://blog.csdn.net/qq_23158083/article/details/54587161) 查看。webpack.config.js是webpack打包时读取的默认配置文件，webpack将根据此配置文件进行打包操作，本文将主要介绍webpack.config.js的各项简单配置（webpack1.x版本为例）

1.entry和output

entry和output描述webpack打包时的入口文件和输出文件的路径，名称以及其他参数
最简单的示例：

module.exports = {
    entry:"./main.js",
    output:{
        path:__dirname+"/dist",
        filename:"bundle.js"
    }
}

上面的例子中，以webpack.config.js所在目录下的main.js为入口，将打包后的bundle.js文件输出到根目录下的dist文件夹下，其中__dirname代表当前项目的根目录，如果需要指定多个入口文件和多个出口文件，可以这么定义：

module.exports = {
    entry:{
        bundle:"./main.js",
        bundle2:"./main2.js"
    },
    output:{
        path:__dirname+"/dist",
        filename:"[name].js"
    }
}

上面的例子中，有两个入口文件，main.js和main2.js,在output中，[name]与entry中的bundle和bundle2对应，生成的文件即为dist文件下的bundle.js和bundle2.js两个文件

2.module

在module下可以指定loader来加载不同类型的文件，然后将加载后的文件打包到一起，以使用ES6为例，需要使用用babel来将ES6翻译为ES5：

module.exports = {
    entry:{
        bundle:"./main.js"
    },
    output:{
        path:__dirname+"/dist",
        filename:"[name].js"
    },
    module:{
        loaders:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                loader:"babel-loader",
                query:{
                    presets:['es2015']
                }
            }
        ]
    }
}

上面的例子中，module对象下的loaders是一个数组，定义各种加载规则，数组的每一项是一种匹配和加载规则，其中：
test指定所匹配的文件类型，值为正则表达式（注意两端是斜杠而不是引号,代表正则表达式，/…/中间的内容是正则表达式的匹配规则），比如 test:/\.js$/ 匹配以.js结尾的文件（\.代表字符.因为在正则表达式中.代表任意字符（不包括换行符），此处需要转义，.js匹配文件名中包含.js的文件，但是如果文件名为a.js.txt也可以匹配，所以加$来确保文件是以.js来结尾的）
exclude指定匹配规则忽略的文件
loader指定使用的加载器，比如我们在此处使用的是babel-loader,
query指定loader的参数，比如这里query:{presets:['es2015']} 其实代表的就是
loader:"babel-loader？presets=es2015",只不过在query中将参数其提取出来了

因为此处使用了babel-loader 和 preset-es2015，所以需要使用npm安装所使用到的loader

npm install --save babel-core babel-loader babel-preset-es2015

如果使用多个加载器，可以使用!将多个加载器放在loader参数里，比如加载less文件可以这么写：

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

安装相应包：

npm install --save style-loader css-loader less-loader

注：在webpack1.x版本里，-loader可以省略，如上面的loader可以简写为

loader:"style!css!less"

但是在webpack2.x版本不允许简写，所以建议还是从现在开始不要简写了

3.plugins

在plugins中可以定义各种插件，plugins是一个数组，数组每一项new一个插件对象
以压缩代码的插件为例：

扫描二维码关注公众号，回复： 3854679 查看本文章

var webpack = require("webpack");
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;

然后在plugins中定义：

plugins:[
        new uglifyJsPlugin({
            compress:{
                warnings:false
            }
        })
]

安装：

npm install --save webpack@^1.14.0

使用此插件后，打包后的js文件将被压缩，可用于正式发布的版本

4.常用插件

1>提取公共部分的插件：CommonsChunkPlugin

var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;

然后在entry中定义提取那些公共部分：

entry:{
        bundle:"./main.js",
        vendor:['jquery']
}

添加插件：

new CommonsChunkPlugin('vendor','vendor.js');

在打包时，便可以将公共部分的jquery提取出来，单独打包为vendor.js，使用此插件，可以将jquery，react等公共部分提取出来，避免打包后的单个文件过大

注：使用插件生成的vendor.js在html页面引入时，必须在bundle.js之前引入也就是说，公共部分的必须放在前面！

2>打开浏览器的插件OpenBrowserPlugin

var OpenBrowserPlugin = require("open-browser-webpack-plugin");

添加插件：

new OpenBrowserPlugin({
    url:"http://localhost:8080"
}),

这样配置之后，在使用webpack-dev-server命令时，会自动调用系统浏览器打开http://localhost:8080，
安装：

npm install --save open-browser-webpack-plugin

3>打包html的插件HtmlWebpackPlugin

var HtmlWebpackPlugin = require('html-webpack-plugin');

添加插件：

new HtmlWebpackPlugin({
    template: './index.html',
    minify:{collapseWhitespace:true}  //压缩html文件
})

配置之后，打包时将使用index.html为模板，将引入打包后js文件的html一起打包到dist文件夹下，不用手动引入，
设置minify:{collapseWhitespace:true 参数，可以将html压缩，生成发布版本
安装：

npm install --save html-webpack-plugin

4>ProvidePlugin
使用ProvidePlugin可以将一些常用的变量引入，比如使用jquery时，不用在每个js文件引入 jquery，使用React时，不用在每个js文件引入React，相当于定义了全局公共变量

var ProvidePlugin = webpack.ProvidePlugin;

使用插件：

new ProvidePlugin({
    $:'jquery'，
    React:'react',
    ReactDOM:'react-dom'
})

这样便可以在js文件中直接使用而不用每次都引入了
安装：

npm install --save jquery react react-dom

5.整个webpack.config.js文件(webpack1.x版本为例)：

var webpack = require("webpack");
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
var OpenBrowserPlugin = require("open-browser-webpack-plugin");
var ProvidePlugin = webpack.ProvidePlugin;
module.exports = {
    entry:{
        bundle:"./main.js"
    },
    output:{
        path:__dirname+"/dist",
        filename:"[name].js",
        vendor:['jquery']
    },
    module:{
        loaders:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                loader:"babel-loader",
                query:{
                    presets:['es2015']
                }
            },
            {
                test:/\.css$/,
                loader:"style-loader!css-loader!less-loader"
            }
        ]
    },
    plugins:[
        new uglifyJsPlugin({
            compress:{
                warnings:false
            }
        }),
        new CommonsChunkPlugin('vendor','vendor.js'),
        new OpenBrowserPlugin({
            url:"http://localhost:8888"
        }),
        new HtmlWebpackPlugin({
            template: './index.html',
            minify:{collapseWhitespace:true}  
        }),
        new ProvidePlugin({
            $:'jquery'，
            React:'react',
            ReactDOM:'react-dom'
        })
    ]
}

1.entry和output

2.module

3.plugins

4.常用插件

5.整个webpack.config.js文件(webpack1.x版本为例)：

猜你喜欢