/2016/5/25/ 玩了玩 webpack

以前没用过前端构建工具，最近想试试 Vue ，所以想用一用 webpack ，找了一堆教程，看了都感觉不是很能理解透彻... 大都是讲步骤，而 webpack 每个步骤的逻辑的不是讲的很清楚，最终看了看 webpack 官方文档和示例才到能用的地步....

笔记一下：

安装

全局安装

npm install webpack -g

项目安装

npm install webpack --save-dev

加载器

加载器使用方法有三种

• js 里使用 require
• webpack.config.js 里配置
• CLI 命令行中绑定

使用 require 文件处理顺序从右到左，比如：

require("!style!css!less!bootstrap/less/bootstrap.less");

文件 bootstrap/less/bootstrap.less 依次经过以下加载器处理： -> less -> css -> style

通常使用配置 webpack.config.js 的方法。
在配置中指定某种后缀的文件用哪个加载器，再在 js 里就可以直接用 require(file.XXX) 了。

安装 babel 载入器

npm i --save-dev babel-core babel-loader

npm install babel-preset-es2015 --save-dev  //支持ES2015
// npm install babel-preset-stage-0 --save-dev //支持ES7

webpack.config.js 配置：

{test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: {presets: 'es2015',}}

配置中 test 是文件名测试，用一个正则表达式测试文件名，匹配的文件名就会使用这个载入器。
exclude 是排除的规则，通常我们要把 "node_modules"　排除掉，

安装 CSS\SASS 载入器

npm install css-loader style-loader sass-loader node-sass --save-dev

webpack.config.js 配置：

 { test: /\.css$/,  loader: 'style-loader!css-loader'},
 { test: /\.sass$/, loaders: ["style", "css", "sass"]},
 { test: /\.scss$/, loaders: ["style", "css", "sass"]}

npm install url-loader file-loader --save-dev

安装图片载入器

npm install url-loader file-loader --save-dev

图片载入器用来把 CSS 中的 url 地址中的文件转化成 BASE64 的形式

{test: /\.(png|jpg|jpeg)$/, loader: 'url?limit=8000&name=../bin/img/[name].[ext]'}

载入配置中 ?limit=8000 表示只把 8K 大小以下的图片转换成 BASE64。&name=../bin/img/[name].[ext] 表示把没有处理的文件复制到指定文件夹。

第三方库

npm install lodash --save-dev
npm install jquery  --save-dev

使用第三方库时要把配置中的入口 entey 改为数组形式, 并区分自己的 js 和第三方库的 js，这是为了接下来不把第三方库和自己的 js 合并在一起：

    entry: {
        main:'./src/entry.js',
        vendor:['jquery', 'lodash']
    }

使用下面两个插件来把第三方库单独打包并注册全局标识符：

plugins: [
    new webpack.ProvidePlugin({$: 'jquery', jQuery: "jquery", _:"lodash"}),// 注册全局标识符
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),// 把第三方库单独打包
]

压缩

需要发布时，使用 webpack.optimize.UglifyJsPlugin 插件来压缩代码：

    plugins: [
        new webpack.optimize.UglifyJsPlugin({compress: {warnings: false}})
    ]

配置结果：

const webpack = require('webpack');


module.exports = {
    entry: {
        main:'./src/entry.js',
        vendor:['jquery', 'lodash']
    },
    output: {
        path: './bin',
        filename: 'app.bundle.js'
    },
    module:{
        loaders:[
            {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: {presets: 'es2015',}},
            {test: /\.css$/, loader: 'style-loader!css-loader' },
            {test: /\.sass$/, loaders: ["style", "css", "sass"]},
            {test: /\.scss$/, loaders: ["style", "css", "sass"]},
            {test: /\.(png|jpg|jpeg)$/, loader: 'url?limit=8000&name=../bin/img/[name].[ext]'}
        ]
    },
    plugins: [
        new webpack.BannerPlugin("---------nullice--------Banner 注释"),
        new webpack.ProvidePlugin({$: 'jquery', jQuery: "jquery", _:"lodash"}),
        new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
        // new webpack.optimize.UglifyJsPlugin({compress: {warnings: false}})
    ]
};