webpack的基本配置和一些理解

Posted 2020-12-02 Rachid

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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
　　　　})
　　]

}