webpack的基本配置和一些理解

最近花了两周的休息时间学习了webpack，能够可以编写自己项目所需要的配置文件，总体来说webpack是一种非常优秀的前端模块化的打包工具，非常值得花时间来研究学习。

什么是webpack，它的出现是为了解决什么问题？

webpack是一种可以融合各种前端新技术的平台，我们只需要简单地配置就可以使用jsx和typescript等一些前端新语法，得益于社区的发展，当我17年第一次接触webpack的时候，还都是英文文档，现在已经有很多优秀的中文入门教程和工程实践

我们开始配置我们的webpack.config.js

主要的api

1、entry（项目入口）　　

　　字符串，如entry:"./src/index.js"

　　数组形式： 如entry:[react, react-dom],可以把数组中的多个文件打包转换为一个chunk

　　对象形式，如果需要配置的是多页的应用，或者我们哟啊抽离出指定模块作为指定公共代码，需要采用这种形式，属性名是占位符[name]的值

　　 如：

entry: {

　　main:'./src/index2.js',

　　second: './src/index2.js',

　　vendor:['react', 'react-dom']

}

2、output（出口文件）

 　　会告诉webpack在哪里输出所创建的bundle.js以及如何命名

　　　out：{

　　　　path:path.join(__dirname, './dist'),

　　　　name: 'js/bundle-[name]-[hash].js,

　　　　chunkFilename: 'js/[name].chunk.js',

　　　　publicPath:'/dist/'

　　}

3、module（模块的处理）

webpack只能处理js文件，浏览器也可能不识别一些最新的js语法，所以我们就要对传入的模块做一些预处理，这就涉及到了webpack的又一核心概念“loader”’

loader的作用和基本用法

webpack中，loader的配置主要在module.rules中进行，这是一个数组，每一个rule做了两件事

• 识别文件类型，来确定具体处理该数据的loader(Rule.test属性)
• 使用相关的loader对文件进行相关的操作转换(Rule.use属性）     

比如我们想要处理react中的jsx语法

module: {

　　rules:[{

　　　　test: /(\.jsx|\.js)/,  //表示匹配规则，是一个正则表达式

　　　　use:{   　　　　 //表示针对匹配文件将使用处理的loader

　　　　　　loader: "babel-loader",　　

　　　　　　options: {

　　　　　　　　presets: ["es2015", "react"]

　　　　　　}

　　　　}

　　}]

}

常用的loader：

　　转换编译：script-loader, babel-loader,ts-loader,coffee-loader

　　处理样式：style-loader,css-loader,less-loader,sass-loader,postcss-loader

　　处理文件：raw--loader,url-loader,file-loader

　　处理数据：csv-loader,xml-loader

　　处理模板语言：html-loader,pug-loader,jade-loader,markdown-loader

　　清理和测试：mocha-loader,eslint-loader

　　此外还有许多loader，可以到loader文档里查询

4、plugin（loader不能做的处理都能交给plugin来做）

const CleanWebpackPlugin = require("clean-webpack-plugin")

{

　　...

　　plugin:[

　　　　new webpack.DefinePlugin({

　　　　　　"process.env" : {

　　　　　　　　NODE_ENV: JSON.stringify("production")

　　　　　　}

　　　　}),
　　　　new CleanWebpackPlugin(["js"], {

　　　　　　root: __dirname + "/stu/",
　　　　　　verbose: true,
　　　　　　dry: false
　　　　})
　　]

}

一种插件就是一种函数，通过传入不同的参数，可以实现不同的功能，webpack让人觉得难学的地方之一是哟啊自己封装plugins，对于我们大多数人来说，需要掌握的plugins并不是那么多，用的时候再查就可以

5、一些辅助开发的相关属性

　　devtool:打包后的代码和原始代码存在较大的差异，此选项控制是否生成以及如何生成sourcemap

　　devserver：通过配置devserver选项，可以开启一个本地服务器

　　watch：启用watch模式后，webpack将持续监听热河已经解析文件的更改，开发是开启会很方便

　　watchoption：用来定制watch模式的选项

　　performance：打包后命令行如何展示性能提示，如果超过某个大小是警告还是报错

　　

对于webpack配置，要区分开发环境还是产环境

下面是文档的建议

我们为了避免重复应该提取公共代码

所以一般有这么几个文件

webpack.config.js

webpacl.dev.js

webpack.prod.js

webpack.common.js

此外还有单独配置babel的文件babelrc，webpack可以自动识别

如果大家想跟着配置一个webpack.config.js文件，可以参考入门webpack，看这篇就够了

还有文档可以仔细看一下webpack中文文档