阅读 95

webpack4从零 搭建完整项目(demo)

无webpack.config.js配置打包

1、快速构建package.json文件。

npm init -y
复制代码

2、安装webpack4及其命令行接口

npm i webpack webpack-cli --save-dev   (webpack4 需要务必装 webpack-cli)复制代码

3、package.json文件增加build参数

"scripts": {
  "build": "webpack"
}复制代码

4、创建./src/index.js文件

增加内容

console.log(`这是入口文件`);复制代码

5、终端执行npm run build

目录下多了一个./dist/main.js
这个文件是webpack./src/index.js的打包结果。

production和development模式

1、修改package.json文件的scripts字段

"scripts": {
  "dev": "webpack --mode development",
  "prod": "webpack --mode production"
}复制代码


2、分别执行npm run devnpm run prod

  1. 你会看到./dist/main.js不同的变化。

    production模式下,默认对打包的进行minification(文件压缩),Tree Shaking(只导入有用代码),scope hoisting(作用域提升)等等操作。
    总之是让打包文件更小。

    development模式下,对打包文件不压缩,同时打包速度更快。

如果没指定任何模式,默认是production模式。

ES6和React

1、安装对应依赖包
npm i babel-core babel-loader babel-preset-env babel-preset-react --save-dev

npm install --save react react-dom复制代码


2、新建.babelrc文件,进行相关配置

{
  "presets": ["env", "react"]
}
复制代码


3、新建webpack.config.js文件,进行相关配置

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


4、新./src/app.js以及修改./src/index.js

./src/app.js内容如下:

import React from "react";
import ReactDOM from "react-dom";
const App = () => {
  return (
    <div>
      <p>Hello webpack4</p>
    </div>
  );
};
export default App;
ReactDOM.render(<App />, document.getElementById("app"));复制代码

./src/index.js内容如下:

import App from "./App";复制代码


5、终端执行npm run prod

使用html-webpack-plugin插件对html进行打包

新建./src/index.html文件,内容如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>QWK</title>
</head>
<body>
    <div id="app">
    </div>
</body>
</html>复制代码

安装依赖包

npm i html-webpack-plugin html-loader --save-dev复制代码

修改webpack.config.js配置

const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};
复制代码

终端执行npm run prod命令。
你会看到项目多了个./dist/index.html文件


使用webpack-dev-server插件

安装依赖包
npm i webpack-dev-server --save-dev

修改package.json文件

"scripts": {
  "start": "webpack-dev-server --mode development --open",
  "prod": "webpack --mode production"
}复制代码

修改webpack.config.js文件,新增devServer配置

devServer: {
    contentBase: require('path').join(__dirname, "dist"),
    compress: true,
    port: 8033,
    host: "127.0.0.1",
}
复制代码

终端执行npm run start便可以启动webpack dev server

使用 Hot Module Replacement

Hot Module Replacement有针对React,Vue,Redux,Angular,样式等等。
这里我们以React Hot Loader为例

安装依赖包

npm i react-hot-loader --save-dev
复制代码

修改.babelrc文件,新增plugins选项

{
  "plugins": ["react-hot-loader/babel"]
}复制代码

修改webpack.config.js文件

const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");  
const webpack = require('webpack'); // 新增
module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                        options: { minimize: true }
                    }
                ]
            }
        ]
    },
    devtool: 'inline-source-map',
    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/index.html",
            filename: "./index.html"
        }),
        new webpack.NamedModulesPlugin(), // 新增
        new webpack.HotModuleReplacementPlugin() //新增
    ],
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        compress: true,
        port: 8033,
        host: "127.0.0.1",
        hot: true // 新增
    }
};
复制代码

修改./src/app.js文件内容如下:

import React from "react";
import ReactDOM from "react-dom";
import { hot } from 'react-hot-loader' // 新增

const App = () => {
  return (
    <div>
      <p>这是一个测试文件!真得是动态更新啊</p>
      <div>好棒棒啊</div>
    </div>
  );
};
export default hot(module)(App); // 修改
ReactDOM.render(<App />, document.getElementById("app"));
复制代码

终端执行npm run start便可以启动webpack dev server
然后修改./src/app.js看下效果


文章分类
前端
文章标签