当下的前端比较潮流的主要是以react、vue、ng,等的mvvm框架,来构建单页应用的。所在通常选用的都是webpack这类的打包工具,以下聊聊webpack相关的知识吧!

核心概念
  • entry:代码入口,打包入口,单个或多大
  • ouput:打包文件,一个或者多个,自定义规则,前缀等等
  • loaders:处理各种类型的文件,转化为模块
  • plugins:参与打包整个过程。打包优化和压缩。配置编译时的变量。压缩、混淆、代码分割等
// entry
mosule.exports = {
  entry: './index.js'
  entry: ['index.js', 'vendor.js']
  entry: { index: 'index.js' } // 每个entry对应的key,
  entry: {
    index: ['index.js', 'vendor.js']
    vendor: 'vendor.js'
  }
}

// output
mosule.exports = {
  entry: './index.js'
  output: {
  	filename: 'index.min.js'
  }
}

// loader
// babel-loader ts-loader
// style-loader css-loader less-loader postcss-loader
// file-loader url-loader

// 常用Plugins
// 优化相关:CommonsChunkPlugin-提取不同代码之间相同的代码 UglifyjsWebpackPlugin-压缩混淆
// 功能相关:ExtractTextWebpackPlugin-提取CSS为单独文件 HtmlWebpackPlugin-生成HTML HotModuleReplacementPlugin-模块热更新 CopyWebpackPlugin-copy文件
// 名词:Chunk-代码块 Bundle-打包过以后的代码 Module-loader将文件处理成一个模块
function resolve (dir) {
  return path.join(__dirname, dir)
}
mosule.exports = {
  entry: {
  	index: './index.js',
  	vendor: './vendor.js'
  },
  output: {
    path: resolve('dist'),
    publicPath: '/',
    filename: '[name].[hash:5].bundle.js',
    chunkFilename: '[name].chunk.js'
  },
  module: {
  	rules: [{
  		test: /\.css$/,
  		use: 'css-loader',
  	}, {
  		test: /\.js$/,
  		use: {
        loader: 'babel-loader',
        options: {
          presets: [['env', {
            targets: {
              browsers: ['>1%', 'last 2 versions']
            }
          }], 'react']
        }
      },
      exclude: '/node_modules/'
  	}]
  },
  plugins: [
  	new webpack.optimize.UglifyJsPlugin()
  ]
}

// webpack --config webapck.conf.dev.js
// webpack entry<entry> output
// babel-presets babel-plugin
// babel-loader
// npm install babel-loader@8.0.0-beta.0 @babel/core
// npm install –save-dev babel-loader babel-core

使用webpack

  • webpack的命令
  • webpack-cli
  • webpack配置(webpack.config.js指定配置文件)

打包

webpack --config webpack.conf.js
编译ES6 / ES7
babel babel-presets babel-plugin
babel-loader
babeljs.io

npm install babel-loader@8.0.0-beta.0 @babel/core
# or
npm install –save-dev babel-loader babel-core
  • babel presets
    • es2015
    • es2016
    • es2017
    • env(use this)
  • babel-preset-react
  • babel-preset-stage 0 - 3

本篇主要以 版本4.28 为主要讲解 毕竟不用配置了

创建一个新目录并进入该目录

makdir webpack4 && cd $_

初始化packagejson 安装一些依赖

yarn init
yarn add webpack webpack-cli --dev

编辑packagejson

vim package.json

"scripts": {
  "build": "webpack"
}

关闭保存
尝试运行

yarn build

发现错误提示

ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/devmsg/webpack'
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

webpack4在./src中寻找entry入口点!如果您不知道这意味着什么,请查看官方的说明文档

简而言之: entry point(入口点) 是 webpack 寻找开始构建 Javascript 包的文件。

在以前版本的 webpack 中,必须在名为 webpack.config.js 的配置文件中 通过 entry 属性定义 entry point(入口点) 。

但是 从 webpack 4 开始,不再必须定义 entry point(入口点) :它将默认为 ./src/index.js !

测试这个新功能很简单。 创建 ./src/index.js:

index.js 代码:

console.log(`I'm a silly entry point`);

继续构建

yarn build

这就构建好了,惊喜不?没有写output配置啊 这就是webpack4的更新

webpack 的主要优势在于 code splitting(代码拆分)。使用零配置工具可以加快速度。

所以这是第一条新闻:webpack 4 不是必须要有配置文件。

它将查找 ./src/index.js 作为默认入口点。 而且,它会在 ./dist/main.js 中输出模块包。

webpack 4:production(生产) 和 development(开发) 模式

拥有2个配置文件在 webpack 中是的常见模式。

一个典型的项目可能有:

  • 用于开发的配置文件,用于定义 webpack dev server 和其他东西
  • 用于生产的配置文件,用于定义 UglifyJSPlugin,sourcemaps 等
    虽然较大的项目可能仍然需要 2 个配置文件,但在 webpack 4 中,您可以在没有一行配置的情况下完成。

怎么会这样?

webpack 4 引入了 production(生产) 和 development(开发) 模式。
还记得第一次build么 其实控制台还有一些输出的

E553B46CAE755F1DD8BC65722B0A9319

The ‘mode’ option has not been set. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for this environment.
“模式”选项尚未设置。 将 “mode” 选项设置为 “development” 或 “production” 以启用此环境的默认值。

那是什么意思? 让我们来看看。

打开 package.json 并填充 script 部分,如下所示:

package.json 代码:

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

现在尝试各环境运行后的结果

yarn dev

main.js 没有压缩!

yarn build

main.js 压缩!

总结

production mode(生产模式) 可以开箱即用地进行各种优化。 包括压缩,作用域提升,tree-shaking 等。
另一方面,development mode(开发模式)针对速度进行了优化,仅仅提供了一种不压缩的 bundle 。
所以这是第二条新闻:webpack 4 引入了 production(生产) 和 development(开发) 模式。
在 webpack 4 中,您可以在没有一行配置的情况下完成任务! 只需定义 –mode 参数即可免费获得所有内容!
那我们如何覆盖默认的entry和output文件呢

package.json 代码:

"scripts": {
  "dev": "webpack --mode development ./foo/src/js/index.js --output ./foo/main.js",
  "build": "webpack --mode production ./foo/src/js/index.js --output ./foo/main.js"
}

接下来 让我们通过webpack4来构建各项目吧
安装重要babel-loader babel-core preser等

yarn add babel-core babel-loader babel-preset-env --dev

在跟项目创建 .babelrc文件配置babel

{
    "presets": [
        "env"
    ]
}

那接下来如何配置一下webpack的loader以及插件呢,还是需要配置文件的。零配置只是用上面的哦入口 输出 生成等

首先在更目录创建webpack.config.js

编辑

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

接下来打开 ./src/index.js 并编写一些 ES6 代码:

const arr = [1, 2, 3];
const iAmJavascriptES6 = () => console.log(...arr);
window.iAmJavascriptES6 = iAmJavascriptES6;

build构建

yarn build

可以看到转化后的代码了

接下来让我们用webpack4配置react项目吧

安装react相关依赖

yarn add react react-dom --dev
yarn add @babel/preset-react --dev

修改babelrc配置

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

然后我们在通过babel-loader修改一下jsx拓展支持
配置webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};