总结webpack4的使用

原创 2018年04月17日 10:22:37

1、webpack4与webpack3的比较

  • 不需要在配置文件webpack.config.js中指定入口以及出口文件

    webpack3的webpack.config.js文件:

const path = require('path')
module.export = {
    output: {
        path: path.resolve(__dirname, './dist')
    },
    entry: './src/index.js'
}

*在webpack4中不需要指定入口和出口:不指定输入文件位置的话,则默认为src/index.js. 不指定输出文件位置,默认为 dist/main.js

2、实时刷新

  • 入口文件src/index.js的变化,包括它所引用的其他模块的变化如何通知给webpack,以便重新构建dist/main.js文件?

    ⇒ 使用webpack中的watch: npx webpack –mode development –watch(此处使用webpack是还未装webpack-dev-server包)

  • dist/main.js文件更新后,浏览器中打开的页面该如何自动刷新?

    ⇒ 使用webpack-dev-server解决,该包是一个基于express.js的开发服务器。提供实时刷新浏览器页面的功能。(文档中推荐使用webpack-server)
    =>安装该包: npm install -D webpack-dev-server
    => 执行: npm webpack-dev-server –mode development
    3、webpack的配置文件

const path = require('path')
module.exports = {
  mode: 'development',
  devServer: {
    contentBase: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: [
          path.resolve(__dirname, 'src')
        ],
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-react']
        }
      }
    ]
  }
}

写完配置文件后只需要运行:npx webpack-dev-server

点击此处查看更多关于webpack的知识

webpack4入门教程

https://blog.zfanw.com/webpack-tutorial/#%E5%AE%89%E8%A3%85-webpack
  • OHRadiance
  • OHRadiance
  • 2018-04-02 09:28:48
  • 163

webpack4.X版本的使用

现在,webpack已经更新到了4.X的版本了,在这之前呢,有过一点的接触,简单的学了一下,但是到了这个版本之后呢,发现了很多新的东西,有些指令,包的功能发生一些变化,在使用的过程中也发现了很多的问题...
  • luo_tianhong
  • luo_tianhong
  • 2018-03-27 13:27:19
  • 198

webpack4.x 处理less、sass文件,分离编译后的css,自动添加css前缀,自动消除冗余css 第七节

处理less文件 我们创建一个src/less/a.less文件 @a:red; #div1{ color: @a; ul{ li{ ...
  • xyphf
  • xyphf
  • 2018-04-06 00:17:03
  • 269

webpack4

还好前面写webpack3.x稍微赶上了点热度,最近在准备重构,还在考虑要不要使用parcel,正好发布了webpack4.0.0,就研究了下,修改还是比较大的。包含了大量的特性更新, 以及极大的性能...
  • qq_20334295
  • qq_20334295
  • 2018-02-28 15:30:05
  • 3507

webpack4——SplitChunksPlugin使用指南

写在前面       前面写了一篇有关webpack4的不完全升级指南以及在webpack...
  • qq_26733915
  • qq_26733915
  • 2018-03-06 15:04:42
  • 478

webpack4安装与学习

在慕课上学习了webpack的课程,做了一些笔记,算分享也算记录吧。教程里的是webpack1和现在的webpack4有很多区别,自己也走了不少的坑,最好使用的时候去看官方文档。https://web...
  • Datura_Elena
  • Datura_Elena
  • 2018-03-29 09:17:20
  • 199

webpack4.x 关于style-loader和css-loader的配置以及JS的生产环境压缩 第五节

loaders:在webpack里面是一个很重要的功能 表示加载器、转换器 通常情况下,webpack只对js文件提供支持,但是比如说less/sass/css/ES7等就不认识了,这时候就需要...
  • xyphf
  • xyphf
  • 2018-04-05 21:35:42
  • 258

[js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)

还记得我们上文中的index.html文件吗? 那里面的script标签还是写死的index.bundle.js文件,那么怎么把他们变成动态的index.html文件,这个动态生成的index.htm...
  • zhuzhu81
  • zhuzhu81
  • 2017-09-11 19:02:02
  • 196

webpack4.x 总结

webpack4.x 总结node.js官网下载node.js,按提示安装(会自动配置环境变量).安装带有的npm包管理器,可直接使用。1.webpack全局安装npm install -g webp...
  • Jerryman_GHJ
  • Jerryman_GHJ
  • 2018-03-31 13:55:27
  • 242

webpack4.x下babel的安装、配置及使用

前言   目前,ES6(ES2015)这样的语法已经得到很大规模的应用,它具有更加简洁、功能更加强大的特点,实际项目中很可能会使用采用了ES6语法的模块,但浏览器对于ES6语法的支持并不完善。为了实...
  • u012443286
  • u012443286
  • 2018-03-16 12:40:13
  • 956
收藏助手
不良信息举报
您举报文章:总结webpack4的使用
举报原因:
原因补充:

(最多只允许输入30个字)