webpack4体验

Posted 小数点就是问题

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack4体验相关的知识,希望对你有一定的参考价值。

webpack-dev-server的3.1.0版本只支持webpack4,所以以前的版本都不能使用3.1.0版本。

而webpack4把webpack-cli分离开来,所以要单独安装。

而webpack4较之前的版本运行更快。

在官网给出的示例中,可以不用配置entry和output,默认的entry:’/src’, 
默认的output:’./dist’,但是零配置的情况下’./src’的入口文件的文件名必须是index.js,否则会报错。

 

约定了生产模式和开发模式下的配置

在之前的版本中,针对生产环境和开发环境,需要做不同的配置, 
常见的都是指定标量,然后在webpack.config.js配置文件中,进行环境判别,

"scripts":{

   "prod":"NODE_ENV=production webpack -p"

}

判别出环境后,再在配置文件中,根据不同的环境做不同的打包工作。 
或者是生成两个配置文件,webpack.dev.js和webpack.prod.js,分别对应于两个环境。

在Webpack4.0中,通过mode指定环境。

在Webpack中,提供了mode变量,用于配置运行环境,mode的值可以为development,表示的是开发模式,或者是production,表示的是生产模式。

"scripts":{
  "build":"webpack --mode production"
}

在Webpack中约定了针对开发环境和生成环境的一些默认操作。所以一般没必要不需要在分两份配置文件。

 

使用package.json的scripts启动时直接到node_modules目录下寻找启动的,所以局部安装可以直接配置到scripts里。

"scripts": {
    "start": "webpack --mode development",
    "dev": "webpack-dev-server --mode development"
  }

 

目前webpack4还是不稳定版本,所以还是有问题的,现在我的webpack-dev-server热加载无效,不知道为什么。还有webpack-dev-server最新版本已经默认配置的,所以不需要配置热加载等参数。

 



以上是关于webpack4体验的主要内容,如果未能解决你的问题,请参考以下文章

webpack4-用之初体验

webpack4--按需加载

记一次webpack4+react+antd项目优化打包文件体积的过程

前端短讯Webpack 4 版本发布

Tailwind.css 体验总结

Tailwind.css 体验总结