webpack改造原生JS项目

项目初始化

1：创建npm项目

 使用 npm init -y 生成文件

2:安装webpack依赖

cnpm i -D webpack webpack-cli

3：创建js入口文件

• 创建 src文件，底下跟随着index.js

4:创建webpack配置文件

• 创建webpack.config.js文件
• 写入代码

const path = require("path");
module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./dist"),
  },
};

5：配置package.json的build命令

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

6 :执行 npm run build 打包

首页移植

1 资源拷贝，将index.html、js、css、img拷贝到src文件夹下

2 删除index.html 中所有link、script的引用

3 安装html-webpack-plugin 插件

npm install html-webpack-plugin --save-dev

4 配置webpack.config.js 文件

const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports={
... //原先配置的其他内容
     plugins: [
        new HtmlWebpackPlugin({
          filename: "index.html", //模板名称
          template: "./src/index.html", //模板地址
        }),
      ],
  }

引入 js

创建index.js

• 1 在index.html 同级的情况下。创建index.js

import 'jquery';//原本引入的 jquery.min.js 替换成npm的jquery
import './js/public';
import './js/nav';

• 2 下载jquery flexslider

npm i jquery flexslider -S

• 3 配置webpack.config.js

const webpack = require('webpack');
module.exports={
...
 new webpack.ProvidePlugin({ 
      $: 'jquery',//用$映射jquery
      jQuery: 'jquery',
    }),
}

配置CSS img

1 引入css

在index.js文件引入css

import './css/public.css'
import './css/index.css'

2 安装 style-loader css-loader 插件

npm i style-loader css-loader -D

3 配置 webpack.config.js

module.exports={
...
module.exports={
...
module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader' },
        ],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024,
          },
        },
        generator: {
          filename: 'images/[name].[hash:6][ext]',
        },
      },
    ],
  },
}

更改img的路径图片 全局搜索img/开头的文件 修改为 ../src/img/

这时候 运行

npm run build

得到 dist文件 打开其中的index.html将看见页面的效果

迁移login登录页面 同上面的步骤一般

• 迁移login.html文件
• 在同级src下新建login.js文件 吧css和js引入进去
• 修改img的引入路径

配置webpack.config.js

配置entry两个入口文件。对js进行分离 这样可以加载页面的速度 使用chunks引入打包文件

module.exports={
 ...
  entry: {
    index: "./src/index.js",
    login: "./src/login.js",
  },
 plugins:{
      ...
     new HtmlWebpackPlugin({
      filename: "index.html", //模板名称
      template: "./src/index.html", //模板地址
      chunks: ["index"], //打包文件
    }),
    new HtmlWebpackPlugin({
      filename: "login.html",
      template: "./src/login.html",
      chunks: ["login"],
    }),
    }
}

增加项目开发模式配置

可提高项目的开发速度，不需要每次改动之后build才能看见页面的改动的。

1 下载依赖包

  npm i -D webpack-dev-server

2 配置webpack.config.js

module.exports={
...
  devServer: {
    static: {
      directory: path.join(__dirname, "dist"),
    },
    compress: true, //启动压缩
    port: 3000, //端口
    hot: true, //热启动
  }
}

配置命令 package.json

{
...
  "scripts": {
    "dev": "webpack-dev-server",
    ...
  },
}

此时使用 npm run dev启动项目，项目则会改动的时候相应热更新。 但是原先配置的img路劲找不到了 所以需要再配置一下copy文件

拷贝文件

1 安装依赖

npm i copy-webpack-plugin -D

2 配置webpack.config.js

const CopyWbpackPlugin = require("copy-webpack-plugin");

module.exports={
...
    plugins:[
    ...
     new CopyWbpackPlugin({
          patterns: [
            {
              from: path.resolve(__dirname, "./src/img"),
              to: path.resolve(__dirname, "./dist/img"),
            },
          ],
        }),
    ]
}

剥离css

1 安装依赖

npm i -D mini-css-extract-plugin

2 配置webpack.config.js

const MiniCssExtractPlugn = require("mini-css-extract-plugin");
module.exports = {
...
    module:{
        rules:[
         {
              test: /.css$/,
                use: [MiniCssExtractPlugn.loader, "css-loader"],
          },
        ]
    },
    plugins:[
    ...
     new MiniCssExtractPlugn({
      filename: "css/[name].css",
      chunkFilename: "css/[name].chunk.css",
    }),
    ]
}

js和css压缩

方式一(此方法去除打包出来的空格)

安装依赖

// js
npm i -D terser-webpack-plugin

// css
npm i -D css-minimizer-webpack-plugin

配置

const TerserWebpackPlugin = require("terser-webpack-plugin");
const CssMinimizerPlugn = require("css-minimizer-webpack-plugin");

module.exports = {
...
    optimization:{
         minimize: true,
         minimizer: [new TerserWebpackPlugin(), new CssMinimizerPlugn()],
    }
}

方式二（treeshaking）

treeshaking的触发条件

• 通过解构的方法获取方法，可以触发
• 调用的npm包必须使用ESM(export function fun() {})
• 同一文件触发条件是 mode=production

使用webpack的chunk

module.exports={
    ...
    optimization:{
     splitChunks: {
          minSize: 5 * 1024,
          chunks: 'all',
          name: 'common',
          automaticNameDelimiter: '_',
          cacheGroups: {
            jquery: {
              name: 'jquery',
              chunks: 'all',
              test: /jquery\.js/,
            },
            'lodash-es': {
              name: 'lodash-es',
              chunks: 'all',
              test: /lodash-es/,
            }
          },
        },
     }
}

此时项目的webpack改造就差不多了

多个插件按需加载

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    ["component", {
      'libraryName': "element-ui",
      "styleLibraryName": "theme-chalk"
    }, "element-ui"],
    ["component", {
      'libraryName': "umy-ui",
      "styleLibraryName": "theme-chalk"
    }, "umy-ui"]
  ]
}