前言

学了gulp后马上就开始学了一下webpack，所以马上来谈一下感受，感觉webpack有人说是一个模块化工具，用来和browserify来做比较，我感觉webpack牛逼多了，不但可以把复杂的文件结构打包在一起，而且还可以预编译各种js，css语言，同时可以帮你处理好html，感觉和gulp有的一拼

基本介绍

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器，把模块需要的文件打包成一个或多个bundle

装载

首先install好webpack-cli和webpack，然后在你的根目录新建一个webpack.config.json的配置文件，webpack的主要配置都在这个里面

使用

webpack来打包简单的js文件

首先先建两个互相有联系的js文件，然后在配置文件中创建一个module.exports把配置类容引出定义一个入口参数entry，一个入口文件为一个值，多个入口文件为一个数组值就是对应的地址然后添加一个出口参数output，为一个对象，里面有一个filename值为输出的文件如：

module.exports = {    //入口文件    entry: ['./src/script/main.js', './src/script/a.js'],    //打包输出    output: {        filename: './dist/js/bundle.[chunkhash].js'    }}

其中chunkhash是编译当前文件的随机哈希值

然后你可以在js中引入css文件，如

require('./world.js')//css-loader是让webpack处理.css文件//style-loader是让css文件插入到html里面//require('style-loader!css-loader!./style.css')//用了 --module-bind 'css=style-loader!css-loader'后可以不要每次都处理了require('./style.css')function hello (argument) {    alert(argument);}hello('hello world');

最后只要在html中引入打包后的文件就好了还有如果在packge.json里面的scripts里面加入运行webpack的命令如

"webpack": "webpack --module-bind 'css=style-loader!css-loader'"

以后在命令行中只要运行npm run webpack就好了

webpack对html页面的生成

前面的demo需要你自己把打包后的文件引入html中，其实也有自动生成html打包后文件的一种方法，加一个plugin（插件）

plugins: [        new htmlWebpackPlugin({            filename: './dist/bundle.index.html',            template: 'index.html',            inject: 'head',            title: 'demo'        })    ]

htmlWebpackPlugin是打包后可以直接重新组合html的一个插件然后如果是单页面的程序，你可以new一个htmlWebpackPlugin，如果是多页面的程序你就需要多new几个htmlWebpackPlugin你也可以从配置文件传参到html页面，htmlWebpackPlugin的构造方法中的参数可以在html通过模板语言获取

<%= htmlWebpackPlugin.options.title %>

你还可以在output中设置publicPath，从而使上线后html中引入外部地址而不只是相对位置htmlWebpackPlugin也有很多配置，如压缩html如果是多页面多个htmlWebpackPlugin，可以把entry写成一个对象，然后配置chunks，来指定打包哪个js

webpack打包预处理其他语言

前面只是对html，js，css的打包，而接下来我要介绍的是对各种语言各种文件进行预处理这里用到的是webpack的Loader这里先示范对js的处理你需要把es6代码编译成es5的所以你需要用到babelnpm install babel-loader babel-core babel-preset-env webpack --save-dev然后你需要配置webpack

module: {        loaders: [            {                test: /\.js$/,                loader: 'babel-loader',                query: {                    presets: ['latest']                }                //path.resolve(__dirname, )                //项目运行路径                exclude: path.resolve(__dirname, 'node_modules')            }        ]    },

这句配置的意思就是把后缀名为js的文件用babel-loader处理然后其他配置也是一样的

结语

我这里只是简单的对webpack进行简单的配置，其实还有很多牛逼的配置，以后慢慢学