webpack 4 demo

webpack 是什么

webpack 官网说是 js 的打包工具,我觉得它推进了前端工程化,能将各个组件组合起来。

webpack 4 最显著的特征是减少了很多配置项,这也是为什么 零配置的 parcel 获得了很多人的青睐。

然而我个人觉得所谓零配置是不可能的,只能说是尽可能的精简配置。

webpack4 demo

接下来看 webpack 搭建一个前端工程到底需要多少配置

安装依赖

npm init -y
npm i webpack webpack-cli webpack-dev-server babel-core [email protected] babel babel-preset-env css-loader html-loader html-webpack-plugin mini-css-extract-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin --save-dev

默认入口和默认输出目录

现在在webpack的配置中不需要定义 entry point 和 output file,它们默认的值分别为 ./src/index.js./dist/main.js

环境和启动配置

babel-preset-dev 模块需要在根目录 新建 .babelrc 并进行配置

{
    "presets": [
        "env"
    ]
}

开发环境启动需要在 package.json 中配置

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

生产环境打包则需要配置

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

配置 html、js、css loader

loader中babel是将es6语法转化为es5语法,还有其他能解析html和css等文件的内容,并处理、压缩和进行打包。而 webpack 正是要整合它们,所以要在根目录新建 webpack.config.js 进行配置

const HtmlWebPackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ],
  optimization: {
    minimizer: [
      new UglifyJSPlugin(),
      new OptimizeCSSAssetsPlugin({})
    ]
  },
}

以上是一个最基础的 html、js、css 静态网站项目所需要的 webpack 的配置。

接下来在 src 目录随便 写点东西

先写 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>webpack 4</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

再写 index.js,在 node 环境就可以不再受浏览器 es5 语法的限制了

import style from "./main.css";

console.log('window.fun is arrow function')
window.fun = () => {    
    let es6 =  'es6'
    return es6
}

最后写 main.css

body {
    background: lightskyblue;
}

启动

在开发环境下启动

npm run start

启动后会先处理和打包文件,然后自动打开浏览器并跳转到项目主页,之后修改代码浏览器会自动刷新,开发就很舒服了。

在生产环境下打包

npm run build

这样会打包出生产环境适用的文件,到 dist 目录去看看吧。