webpack的基本配置和一些理解

最近花了两周的休息时间学习了webpack，可以能够编写本身项目所须要的配置文件，整体来讲webpack是一种很是优秀的前端模块化的打包工具，很是值得花时间来研究学习。

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

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

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

主要的api

一、enrty（项目入口）　　

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

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

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

　　 如：

entry: { 　　main:'./src/index2.js', 　　second: './src/index2.js', 　　vendor:['react', 'react-dom'] }

 

二、output（出口文件）

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

　　　out：{ 　　　　path:path.join(__dirname, './dist'), 　　　　name: 'js/bundle-[name]-[hash].js, 　　　　chunkFilename: 'js/[name].chunk.js',
 　　　　publicPath:'/dist/' 　　}

 

 

三、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文档里查询

 

四、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并非那么多，用的时候再查就能够

 

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

　　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中文文档