使用 Webpack 进行生产环境配置（附 Demo）

最新推荐文章于 2024-05-15 03:51:52 发布

浮沉半生

最新推荐文章于 2024-05-15 03:51:52 发布

阅读量419

点赞数

分类专栏：前端开发 Webpack Webpack 文章标签：前端开发 Webpack

本文链接：https://blog.csdn.net/zgd826237710/article/details/87362353

版权

文章目录

本文从代码压缩、代码拆分、样式分离等三个方面对生产环境的代码进行了优化。只是最简单的一些配置，如果真正运用到项目中，还需要根据项目添加更多配置。

前言

本文讲述的是如何对生产环境下的代码进行压缩，如果还不是太了解 Webpack 的朋友，可以先看一下我的上一篇文章：从零开始搭建一个 Webpack 开发环境配置（附 Demo）

本文项目代码位置：源码地址

环境搭建

项目结构

首先编写一个项目，初始化 npm，然后在本地安装 webpack，接着安装 webpack-cli（此工具用于在命令行中运行 webpack）：

$ mkdir webpack-prod-demo

$ cd webpack-prod-demo

$ npm init -y

$ npm install webpack webpack-cli --save-dev

project

webpack-prod-demo
|- package.json
|- /public
  |- index.html
|- /src
  |- index.js
  |- index.css

pubic/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Webpack 生产环境配置</title>
</head>
<body>
    
</body>
</html>

index.js

import './index.css';

function component() {
   
    var element = document.createElement('div');

    element.innerHTML = 'Hello World';
  
    return element;
}
  
document.body.appendChild(component());

index.css

div {
   
    color: blue;
    text-align: center;
}

package.json

{
   
  "name": "webpack-prod-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
   
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

配置 webpack.config.js 文件

在根目录下新建 webpack.config.js 文件，并进行基本配置

安装插件

# 安装 babel-loader
$ npm install babel-core babel-loader@7 --save-dev

# 安装 babel presets
$ npm install babel-preset-env babel-preset-stage-0 --save-dev

# 安装 babel plugins 
$ npm install babel-plugin-transform-class-properties babel-plugin-transform-runtime babel-runtime --save-dev

# 安装其余所需 loader
$ npm install css-loader style-loader file-loader csv-loader xml-loader html-loader markdown-loader --save-dev

# 安装 webpack 插件
$ npm install clean-webpack-plugin html-webpack-plugin friendly-errors-webpack-plugin --save-dev

配置 webpack.config.js：

webpack.config.js

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

最低0.47元/天解锁文章

浮沉半生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用 Webpack 进行生产环境配置（附 Demo）

本文从代码压缩、代码拆分、样式分离等三个方面对生产环境的代码进行了优化。只是最简单的一些配置，如果真正运用到项目中，还需要根据项目添加更多配置。前言本文讲述的是如何对生产环境下的代码进行压缩，如果还不是太了解 Webpack 的朋友，可以先看一下我的上一篇文章：从零开始搭建一个 Webpack 开发环境配置（附 Demo）本文项目代码位置：源码地址环境搭建项目结构首先编写一个项目，...
复制链接

扫一扫