webpack的基本配置和一些理解

Posted 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
    })
  ]

}

 

一种插件就是一种函数,通过传入不同的参数,可以实现不同的功能,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中文文档 

 

 

 

 

 

 

 

 

以上是关于webpack的基本配置和一些理解的主要内容,如果未能解决你的问题,请参考以下文章

webpack查缺补漏

深入理解webpack babel之配置文件

webpack的简单配置

webpack

Webpack CommonsChunkPlugin 理解

webpack 理解