webpack基本使用

webpack是什么？为什么要使用？

随着时代的发展，web应用有越来越丰富的应用和功能，而我们开发web应用所使用到的js代码和依赖包也越来越多，架构也越来越复杂，比如模块化，TypeScript，scss等css预处理器等等，用到了这些东西往往需要进行额外的处理才能被浏览器识别，为了解决这些问题，webpack工具类就孕育而生。

webpack是模块打包工具，它能分析你的项目结构，找到js模块及他们的依赖，同时还能使用各种loader来解析各种浏览器不能识别的代码，还能通过插件处理我们的代码，然后把我们的项目打包成几个文件。

使用webpack

• webpack可以使用npm安装

npm install webpack -D（-S）

-D是指安装到开发依赖，-S是指安装到生产依赖。

• 配置webpack.js文件
  通常我们的项目下如果要使用webpack则需要配置一个webpack.js文件

module.exports = {
    entry: __dirname + '/app/main.js',
    output: {
        path: __dirname + '/dist',
        filename: 'build.js'
    }
}

entry 和 output 这两个选项分别定义webpack的入口文件和打包出口文件。

devtool: 'eval-source-map'

devtool这个选项主要配置source maps，它能在我们打包时同时生成source maps文件，在开发是往往需要各种调试，而打包后的文件非常不容易找出错误代码，而这些文件就是帮助我们快速定位源文件的错误代码，让我们能轻松的找出错误代码并及时更改。

devServer: {
    contentBase: './publice',//本地服务加载的页面，
    historyApiFallback: true,//不跳转
    inline: true//实时更新
}

devServer 能过帮助我们构建本地服务器，当然在此之前需要安装webpack-dev-server。

 module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "env", "react"
                        ]
                    }
                },
                exclude: /node_modules/
            }
        ]
    }

module这个选项就是配置各种各样的加载器的，像babel的loader，css的loader，vue的loader,less的loader等等，配置好了这些loader就是我们能用这些东西做开发。

plugins: [
        new webpack.BannerPlugin('版权所有，翻版必究'),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html"
        }),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin(),
        new ExtractTextPlugin("style.css")
    ],

这个选项能配置个种webpack插件，包括代码压缩，css提取，html压缩，js压缩等等，webpack有许多内置插件和第三方插件，提供许多功能让我们能更好的开发项目。

总结

webpack的知识光是这些还是远远不够的，还需要到官网去学习以及在项目中学习使用。