码迷,mamicode.com
首页 > Web开发 > 详细

webpack4体验

时间:2018-03-04 23:53:28      阅读:867      评论:0      收藏:0      [点我收藏+]

标签:rod   报错   示例   否则   官网   build   通过   div   3.1   

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体验

标签:rod   报错   示例   否则   官网   build   通过   div   3.1   

原文地址:https://www.cnblogs.com/zhangzhicheng/p/8506764.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!