webpack4.1.0沙发版

发表于 | 分类于 ， |

心得 : 最近webpack也升级到4.1.0了，看了看文档很多API变动挺大的，调侃网上说最近写webpack3书籍的哥们要凉了么，不过基础还是要学习的有的还是依赖很多的插件配置。下面回正题如果你是小白请往快速浏览，还没有熟悉webpack的小伙伴请点击下面链接移步阅读再回来。

入门Webpack，看这篇就够了
你也可以尝试去下载我写的这份demo跟着练习，希望可以帮助到你们，这是对我的价值观大大的认可
请点击这里~

webpackd的4.1.0版本做了下面重大变化，更多详细参考官方文档：

  • npm scripts run 不起来了，新版中将 webpack 命令行工具拆分到单独的仓库中，要额外安装 webpack-cli
  • 引入了 mode 配置项 三种模式 ：none ，development ，production 。默认 production 模式，默认压缩代码
  • 移除了CommonsChunkPlugin插件，该插件抽取共用代码，进行代码拆分，对于减少冗余及合理打包功不可没。新版本会进行自动的 trunk 拆分和抽取
    (optimization.splitChunks 和 optimization.runtimeChunk)
    您也可以使用初始块启用这些默认优化optimization.splitChunks.chunks: “all”，optimization.runtimeChunk:true
  • ExtractTextPlugin未对新版本兼容按照原方式运行报错, 官方给了bata_extract-text-webpack-plugin@4.0.0-beta 分支版本.
  • NoEmitOnErrorsPlugin- > optimization.noEmitOnErrors（默认情况下处于生产模式）
  • ModuleConcatenationPlugin- > optimization.concatenateModules（默认情况下处于生产模式）
  • NamedModulesPlugin- > optimization.namedModules（在开发模式下默认开启）
  • CommonsChunkPlugin被删除 - > optimization.splitChunks，optimization.runtimeChunk
  • DefinedPlugin被删除 -> process.env.NODE_ENV 环境变量已经写入webpack 无需使用DefinedPlugin

现在让我们开始简单试用一下webpack新的开发环境吧

开始安装

全局安装：

1
$  cnpm install -g webpack

( 推荐 )对于大多数项目，我们建议本地安装，更容易分别升级项目：

1
$  cnpm install --save-dev webpack@<version>

命令行 cli 打包简要

简要描述下，运行Webpack只需要下面一行命令：

webpack

Webpack在我们改变文件的同时监听改变并重新构建：

webpack --watch （推荐用web-dev-server热更新）

如果想要使用自定义名称的Webpack的配置文件:

webpack --config myconfig.js

webapack -p这个命令新版本已经在配置’production’模式自动启用了，压缩文件

好了介绍完以上的，就手动试下吧 打开命令行

安装webpack 和 webpack-cli（new）

1
2
3
4
5
6
7
8
$ mkdir webpack4.0TestDome && cd webpack4.0TestDome 

$ npm init 

$ npm install -g cnpm --registry=https://registry.npm.taobao.org 
[安装淘宝国内镜像，速度更给力]

$ cnpm install webpack --save-dev && cnpm install webpack-cli -D

这样我们就安装好了新版本的webpack

安装项目依赖包

如果你熟悉用过webpack版本 <= 3.5 下面的操作也很好理解，先安装好依赖包,下面作例子简供参考，按需安装依赖

1
2
3
4
5
//打开 webpack4.0TestDome 目录运行以下命令行
 $ cnpm install --save-dev  css-loader style-loader postcss-loader 
 $ cnpm install --save-dev  html-webpack-plugin clean-webpack-plugin 
 $ cnpm install --save-dev  extract-text-webpack-plugin@4.0.0-beta.0
 $ cnpm install --save-dev  webpack-dev-server

接着准备好 需打包的项目文件

接着来新建一个app.css和index.js和index.html 。如果你希望跟随这个例子练习，可以创建一个如下的目录结构：
小试牛刀 

1
2
3
4
5
6
7
8
webpack4.0TestDome  
|- src
   |- index.js
   |- other.js
   |- index.html
   |- app.css
|- package.json
|- webpack.config.js

webpack.config.js 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
// webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const mode = process.env.NODE_ENV || 'development';
 
module.exports = {
  mode,
  optimization: {
        splitChunks: {//分离第三方库,避免重复打包
            chunks: 'all'
        },
      //  runtimeChunk: true, 可能会多导致加载一份脚本
  },
  devtool: 'inline-source-map',
  entry: {
    index : './src/index.js',
    other : './src/other.js'
  },
  output: {
    filename: '[name]-[hash]-bundle.js',
    path: path.resolve(__dirname, 'dist')
  }, 
  plugins: [
    new webpack.HotModuleReplacementPlugin(),//热更新HRM
    new webpack.BannerPlugin('版权所有，翻版必究'),

    new HtmlWebpackPlugin({
      template: './src/index.html',
      title: 'webpack4'
    }), 
    new CleanWebpackPlugin(['dist']),
    new ExtractTextPlugin({ filename: '[name].css', allChunks: true }),
  ],
  module: {
    rules: [
    {
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: 'css-loader',
      }),
    },
    { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }, // inline base64 URLs for <=8k 
    { //编译HTML中的url
        test: /\.html$/,
        use: [{
          loader: 'html-loader',
          options: {
            minimize: true
          }
        }],
      }
    ]
  },
  devServer: {
    contentBase: './dist',
    hot: true,
    inline: true
  }
 
};

src/index.js 

1
2
3
4
5
6
7
8
9
10
// src/index.js
import _ from 'lodash';
function component() {
    var element = document.createElement('div');
        element.innerHTML = _.join(['Hey guys ,I am index.js', 'webpack4.1.0'], ' ');
        element.classList.add = 'red';
    return element;
  } 

document.body.appendChild(component())
1
2
3
// src/other.js
import _ from 'lodash';
console.log(_.join(['Hi I am other js','webpack4.1.0'],','))

src/app.css 

1
2
3
4
5
6
7
/**  ./src/app.css  */
body {
  background: yellow
}
.red{
  color: red
}

index.html

1
2
3
4
5
6
7
8
<html>
<head>
  <title>Webpack4 Tutorial</title>
</head>
<body>
  
</body>
</html>

运行打包命令行

ok 准备好了，让我们跑下我们刚配置好的webpack.config.js

1
> $ npm run dev

运行完之后，你就可以在根目录看到多了个dist文件和已经打包好了的输出文件，

并且自动把第三方verson库和css文件分离了，很多地方都有改动了,还有很多配置请详细阅读官方文档，这个只是简版通用的尝试，后面我还会继续配置完整这份简版，分别用于生产和开发的webpack,敬请期待

待续更新…

webpack文档还没有更新，版本迭代够快差不多1周时间内修复bug还有添加新配置 还没有稳定版支持，我会持续关注后续更新，希望能帮助到你们，因为它们都是日常工作最常见的用例。

最后的想法

祝贺你！已经成功打包了一个基本配置的文件，更多配置请阅览webpack官网指南, 若有疏漏欢迎issuse指正错误

代码地址 ：点击这里，动手试一试吧！