webpack的基本配置和一些理解

webpack的基本配置和一些理解

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

主要的api

1、enrty（项目入口）　　

　　字符串，如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可以自动识别