webpack4打包配置教程看这篇就够了

最新推荐文章于 2024-06-06 09:41:55 发布
最新推荐文章于 2024-06-06 09:41:55 发布
阅读量4.5k 收藏 8
点赞数 2
分类专栏： 前端开发 文章标签： webpack sass less
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xjl271314/article/details/88315680
版权

前言

本文将从0开始配置一个webpack打包一个项目的完整流程。

准备工作

打开终端 新建一个文件夹 用于管理项目

mkdir webpack4-demo

创建项目

在项目内部打开集成终端

npm init 生成 一个package.json

{
  "name": "webpack4-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

新建dist，src，config目录

mkdir dist src config

在src下新建一个index.js,作为项目的主入口,

cd src
touch index.js

在dist目录下新建一个index.html,并引用index.js

cd dist
touch 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 example</title>
</head>
<body>
    
</body>
<script src="../src/index.js"></script>
</html>

安装webpack相关插件

npm install webpack webpack-cli webpack-dev-server -D

在package.json中添加webpack编译脚本

{
  "name": "webpack4-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack src/index.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.29.6"
  },
  "dependencies": {
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.2.1"
  }
}

执行编译命令

npm run build

在这里插入图片描述
终端会给我们弹出警告，没问题，大概的意思就是webpack的mode参数没有设置，默认下会使用production模式。

webpack4中提供的mode有两个值：开发环境development和生产环境production，默认值是 production。mode是我们为减小生产环境构建体积以及节约开发环境的构建时间提供的一种优化方案，提供对应的构建参数项的默认开启或关闭，降低配置成本。

打包的时候输入webpack --mode=development或者webpack --mode=production就不会出现警告提示了。

development模式下，将侧重于功能调试和优化开发体验，包含如下内容：
  1. 浏览器调试工具
  2. 开发阶段的详细错误日志和提示
  3. 快速和优化的增量构建机制
production模式下，将侧重于模块体积优化和线上部署，包含如下内容：
  1. 开启所有的优化代码
  2. 更小的bundle大小
  3. 去除掉只在开发阶段运行的代码
  4. Scope hoisting和Tree-shaking
  5. 自动启用uglifyjs对代码进行压缩

配置自定义打包环境

首先，移除之前编译后的包

rm dist/main.js

然后，在config目录下生成一个webpack.config.js

cd config
touch webpack.config.js

执行成功后我们的目录结构大致是这样的：

在这里插入图片描述

接下来我们编写我们的webpack.config.js

const path = require('path');//处理路径信息
const config = {
    mode:'development', // development || production
    entry:path.resolve(__dirname,'../src/index.js'),//webpack 打包入口文件
    output:{
        path:path.resolve(__dirname,'../src/dist'),//打包完成放置位置
        filename:'main.js'//打包后的文件名
    },
    module:{//例如如何解读css,图片如何转换，压缩等
        rules:[{
            test:'/\.js$/', //匹配所有的js文件
            exclude:/node_modules/,//除了node_modules以外
        }]
    },
    //插件，用于生产模板和各项功能
    plugins:[],
    //配置webpack开发服务器功能
    devServer:{}
}
module.exports = config

修改package.json中webpack的配置

{
  "name": "webpack4-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack --config=config/webpack.config.js "
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.29.6"
  },
  "dependencies": {
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.2.1"
  }
}

执行打包命令,生成打包后的文件

npm run build

/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ 		}
/******/ 	};
/******/
/******/ 	// define __esModule on exports
/******/ 	__webpack_require__.r = function(exports) {
/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 		}
/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
/******/ 	};
/******/
/******/ 	// create a fake namespace object
/******/ 	// mode & 1: value is a module id, require it
/******/ 	// mode & 2: merge all properties of value into the ns
/******/ 	// mode & 4: return value when already ns object
/******/ 	// mode & 8|1: behave like require
/******/ 	__webpack_require__.t = function(value, mode) {
/******/ 		if(mode & 1) value = __webpack_require__(value);
/******/ 		if(mode & 8) return value;
/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ 		var ns = Object.create(null);
/******/ 		__webpack_require__.r(ns);
/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ 		return ns;
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";
/******/
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = "./src/index.js");
/******/ })
/************************************************************************/
/******/ ({

/***/ "./src/index.js":
/*!**********************!*\
  !*** ./src/index.js ***!
  \**********************/
/*! no static exports found */
/***/ (function(module, exports) {

eval("\n\n//# sourceURL=webpack:///./src/index.js?");

/***/ })

/******/ });

如果有多个入口文件的话可以参照下面代码：

const path = require('path');//处理路径信息
const config = {
    mode:'development', // development || production
    entry:{
        //里面的main是可以随便写的
        main:'../src/main.js',
        main:'../src/main2.js' //这里新添加一个入口文件
    },//webpack 打包入口文件
    output:{
        path:path.resolve(__dirname,'../src/dist'),//打包完成放置位置
        filename:'[name].js'//打包后的文件名 意思是进来是什么名字出来就是上面名字
    },
    module:{//例如如何解读css,图片如何转换，压缩等
        rules:[{
            test:'/\.js$/', //匹配所有的js文件
            exclude:/node_modules/,//除了node_modules以外
        }]
    },
    //插件，用于生产模板和各项功能
    plugins:[],
    //配置webpack开发服务器功能
    devServer:{}
}
module.exports = config

配置development环境下的调试服务

const path = require('path');//处理路径信息
const config = {
    mode:'development', // development || production
    entry:path.resolve(__dirname,'../src/index.js'),//webpack 打包入口文件
    output:{
        path:path.resolve(__dirname,'../dist'),//打包完成放置位置
        filename:'main.js'//打包后的文件名
    },
    module:{//例如如何解读css,图片如何转换，压缩等
        rules:[{
            test:'/\.js$/', //匹配所有的js文件
            exclude:/node_modules/,//除了node_modules以外
        }]
    },
    //插件，用于生产模板和各项功能
    plugins:[],
    //配置webpack开发服务器功能
    devServer:{
        // 设置基本目录结构
        contentBase:path.resolve(__dirname,'../dist'),
        //服务器的ip地址 可以使用ip也可以使用localhost
        host:'localhost',
        //服务器压缩是否开启
        compress:true,
        //配置服务端口号
        port:9999
    }
}
module.exports = config

配置css打包支持

我们需要在module里面配置loaders，loaders可以把SASS文件的写法转换成CSS,也可以把我们项目中写的ES6、ES7等给编译成浏览器能解析的js，下面我们先在src文件夹下面创建index.css文件，并且写一些css在里面。

我们先在index.html中加入如下代码：

<body>
    <div id="root">
        <h2 class="title">Hello webpack4</h2>
    </div>
</body>

然后在index.css中编写如下代码：

.title{
    color: chocolate;
}

然后我们执行打包命令：

npm run server

在这里插入图片描述
我们可以发现，打包失败，错误原因是打包css等文件需要配置另外的loaders支持。

注意：打包css的时候style-loader,css-loader是必须要装的，我们这里再把sass-loader和less-loader装起来 支持对sass和less样式文件的编译

npm i style-loader css-loader sass-loader less-loader -D

配置完成的webpack.config.js

const path = require('path');//处理路径信息
const config = {
    mode: 'development', // development || production
    entry: path.resolve(__dirname, '../src/index.js'),//webpack 打包入口文件
    output: {
        path: path.resolve(__dirname, '../dist'),//打包完成放置位置
        filename: 'main.js'//打包后的文件名
    },
    module: {//例如如何解读css,图片如何转换，压缩等
        rules: [
            {
                test: /\.js$/, //匹配所有的js文件
                exclude: /node_modules/,//除了node_modules以外
            },
            //配置css loaders
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
        ]
    },
    //插件，用于生产模板和各项功能
    plugins: [],
    //配置webpack开发服务器功能
    devServer: {
        // 设置基本目录结构
        contentBase: path.resolve(__dirname, '../dist'),
        //服务器的ip地址 可以使用ip也可以使用localhost
        host: 'localhost',
        //服务器压缩是否开启
        compress: true,
        //配置服务端口号
        port: 9999
    }
}
module.exports = config

测试结果:

在这里插入图片描述
我们发现颜色已经正常的改变了，接下来我们试试用sass来编写(less同理)

1.修改index.css为index.scss
2.修改引入为 import ‘./index.scss’

index.scss

$titleColor:pink;

.title{
    color: $titleColor;
}

执行打包命令

npm run server

如果遇到以下错误

在这里插入图片描述
执行安装命令后执行打包命令

npm install node-sass --save-dev

我们可以看到正确的结果

在这里插入图片描述

到这里为止某些细心的人可能发现配置css打包的时候跟某些查阅到的资料略有不同，少了一个ExtractTextPlugin.extract配置，这个配置是干什么用的呢?

extract-text-webpack-plugin该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象。

我们上面的配置，打包出来的css会被嵌入到index.html中的head中。

如果需要配置ExtractTextPlugin.extract，我们需要安装这个插件，并且修改配置文件

npm install extract-text-webpack-plugin@next --save-dev

或者使用官方推荐的这个css插件，mini-css-extract-plugin，详细的配置教程等文章末尾进行阐述。

配置完成的webpack.config.js

const path = require('path');//处理路径信息
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const config = {
    mode: 'development', // development || production
    entry: path.resolve(__dirname, '../src/index.js'),//webpack 打包入口文件
    output: {
        path: path.resolve(__dirname, '../dist'),//打包完成放置位置
        filename: 'main.js'//打包后的文件名
    },
    module: {//例如如何解读css,图片如何转换，压缩等
        rules: [
            {
                test: /\.js$/, //匹配所有的js文件
                exclude: /node_modules/,//除了node_modules以外
            },
            //配置css loaders
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader', // 编译后用什么loader来提取css文件
                    use: 'css-loader',//需要什么样的loader去编译文件
                    publicPath: '../' //解决css背景图的路径问题
                })
            },
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'less-loader']
                })
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })
            }
        ]
    },
    //插件，用于生产模板和各项功能
    plugins: [
        new ExtractTextPlugin("style.css"),
    ],
    //配置webpack开发服务器功能
    devServer: {
        // 设置基本目录结构
        contentBase: path.resolve(__dirname, '../dist'),
        //服务器的ip地址 可以使用ip也可以使用localhost
        host: 'localhost',
        //服务器压缩是否开启
        compress: true,
        //配置服务端口号
        port: 9999
    }
}
module.exports = config

同时修改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">
    <link rel="stylesheet" href="./style.css">
    <title>webpack example</title>
</head>
<body>
    <div id="root">
        <h2 class="title">Hello webpack4</h2>
    </div>
</body>
<script src="./main.js"></script>
</html>

自动添加css前缀

为了某些兼容性问题，我们配置一个css兼容性插件postCss

npm i postcss-loader autoprefixer -D

新建一个postcss.config.js文件

module.exports = {
    plugins: [
        require('autoprefixer')//自动添加css前缀
    ]
}

配置完成后的文件

const path = require('path');//处理路径信息
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const config = {
    mode: 'development', // development || production
    entry: path.resolve(__dirname, '../src/index.js'),//webpack 打包入口文件
    output: {
        path: path.resolve(__dirname, '../dist'),//打包完成放置位置
        filename: 'main.js'//打包后的文件名
    },
    module: {//例如如何解读css,图片如何转换，压缩等
        rules: [
            {
                test: /\.js$/, //匹配所有的js文件
                exclude: /node_modules/,//除了node_modules以外
            },
            //配置css loaders
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader', // 编译后用什么loader来提取css文件
                    use: ['css-loader','postcss-loader'],//需要什么样的loader去编译文件
                    publicPath: '../' //解决css背景图的路径问题
                })
            },
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader','less-loader']//防置再最后的loader首先被执行
                })
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })
            }
        ]
    },
    //插件，用于生产模板和各项功能
    plugins: [
        new ExtractTextPlugin("style.css")
    ],
    //配置webpack开发服务器功能
    devServer: {
        // 设置基本目录结构
        contentBase: path.resolve(__dirname, '../dist'),
        //服务器的ip地址 可以使用ip也可以使用localhost
        host: 'localhost',
        //服务器压缩是否开启
        compress: true,
        //配置服务端口号
        port: 9999
    }
}
module.exports = config

配置消除冗余的css插件 Purifycss 并且打包html文件

安装相关插件

npm i purifycss-webpack purify-css html-webpack-plugin glob -D

html-webpack-plugin用于自动将打包后的js和css文件注入html文件中

这个插件需要glob插件的辅助

我们来修改一下目录的结构，把配置文件提取出来：

在这里插入图片描述

修改webpack.config.js

const path = require('path');//处理路径信息
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const PurifyCssWebpack = require('purifycss-webpack');
const glob = require('glob');
const HtmlWebpackPlugin = require('html-webpack-plugin');//引入html-webpack-plugin
const webpack = require('webpack');//热更新

const config = {
    mode: 'development', // development || production
    entry: path.resolve(__dirname, 'src/index.js'),//webpack 打包入口文件
    output: {
        path: path.resolve(__dirname, 'dist'),//打包完成放置位置
        filename: 'main.js',//打包后的文件名
    },
    module: {//例如如何解读css,图片如何转换，压缩等
        rules: [
            {
                test: /\.js$/, //匹配所有的js文件
                exclude: /node_modules/,//除了node_modules以外
            },
            //配置css loaders
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader', // 编译后用什么loader来提取css文件
                    use: ['css-loader', 'postcss-loader'],//需要什么样的loader去编译文件
                    publicPath: '../' //解决css背景图的路径问题
                })
            },
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader','less-loader']//防置再最后的loader首先被执行
                })
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })
            }
        ]
    },
    //插件，用于生产模板和各项功能
    plugins: [
        new ExtractTextPlugin("styles.css"),
        new webpack.HotModuleReplacementPlugin(),//在webpack工程中要实现热加载，就是只更新局部的修改
        new webpack.NoEmitOnErrorsPlugin(),//热更相关插件
        new HtmlWebpackPlugin({
            template: 'src/index.html', //模板地址
            filename:'index.html',//生成的dist下的模板名称
            minify:{
                removeComments:true,
                collapseWhitespace:true
            }
        }),
        new PurifyCssWebpack({ //消除冗余代码
            // 首先保证找路径不是异步的,所以这里用同步的方法
            // path.join()也是path里面的方法,主要用来合并路径的
            // 'src/*.html' 表示扫描每个html的css
            paths: glob.sync(path.join(__dirname, 'src/*.html'))
        })
    ],
    //配置webpack开发服务器功能
    devServer: {
        // 设置基本目录结构
        contentBase: path.resolve(__dirname, 'dist'),
        //服务器的ip地址 可以使用ip也可以使用localhost
        host: 'localhost',
        //服务器压缩是否开启
        compress: true,
        //配置服务端口号
        port: 9999,
        //启动webpack-dev-server时自动打开浏览器
        open:false,
        //启用热更
        hot:true
    }
}
module.exports = config

下面我们来配置JS压缩

我们使用这个插件来配置uglifyjs-webpack-plugin

npm i uglifyjs-webpack-plugin -D

引入后在plugins配置里new一个 uglify对象就可以了。

plugins:[
        new uglify()
],

配置css 图片压缩

压缩成功js后 我们来配置一下css图片压缩的功能

首先我们去下载一张图片

示例图

修改index.scss样式为：

$titleColor:pink;

$baseMargin:10px;
.title{
    color: $titleColor;
}

.flex-box{
    display: flex;
    width:600px;
    justify-content: space-between;
    align-items: center;
    margin-top: $baseMargin;
    .a,.b{
        width: 200px;
        height: 200px;
    }
    .a{
        background-image: url("./images/test.jpg");
        background-position: center;
    	background-size: contain;
    }
    .b{
        background-color: violet;
    }
}

执行编译命令后，直接报错
在这里插入图片描述
这里是因为我们缺少loader的解析,现在需要下载两个解析图片的loader file-loader 和 url-loader

npm install --save-dev file-loader url-loader

  • file-loader：解决引用路径的问题，拿background样式用url引入背景图来说，我们都知道，webpack最终会将各个模块打包成一个文件，因此我们样式中的url路径是相对入口html页面的，而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的，file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。
  • url-loader：如果图片较多，会发很多http请求，会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。当然，如果图片较大，编码会消耗性能。因此url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的还会使用file-loader进行copy。

修改webpack.config.js文件配置：

const path = require('path');//处理路径信息
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const PurifyCssWebpack = require('purifycss-webpack');
const glob = require('glob');
const HtmlWebpackPlugin = require('html-webpack-plugin');//引入html-webpack-plugin
const webpack = require('webpack');//热更新
const uglify = require('uglifyjs-webpack-plugin');//压缩js

const config = {
    mode: 'development', // development || production
    entry: path.resolve(__dirname, 'src/index.js'),//webpack 打包入口文件
    output: {
        path: path.resolve(__dirname, 'dist'),//打包完成放置位置
        filename: 'main.js',//打包后的文件名
    },
    module: {//例如如何解读css,图片如何转换，压缩等
        rules: [
            {
                test: /\.js$/, //匹配所有的js文件
                exclude: /node_modules/,//除了node_modules以外
            },
            //配置css loaders
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader', // 编译后用什么loader来提取css文件
                    use: ['css-loader', 'postcss-loader'],//需要什么样的loader去编译文件
                    publicPath: '../' //解决css背景图的路径问题
                })
            },
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader','less-loader']//防置再最后的loader首先被执行
                })
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })
            },
            {
                test:/\.(png|jpg|gif|jpeg)/,  //匹配图片文件后缀名称
                use:[{
                    loader:'url-loader', //是指定使用的loader和loader的配置参数
                    options:{
                        limit:500  //把小于500B的文件打成Base64的格式，写入JS
                    }
                }]
            }
        ]
    },
    //插件，用于生产模板和各项功能
    plugins: [
        new uglify(),//压缩js文件
        new ExtractTextPlugin("styles.css"),
        new webpack.HotModuleReplacementPlugin(),//在webpack工程中要实现热加载，就是只更新局部的修改
        new webpack.NoEmitOnErrorsPlugin(),//热更相关插件
        new HtmlWebpackPlugin({
            template: 'src/index.html', //模板地址
            filename:'index.html',//生成的dist下的模板名称
            minify:{
                removeComments:true,
                collapseWhitespace:true
            }
        }),
        new PurifyCssWebpack({ //消除冗余代码
            // 首先保证找路径不是异步的,所以这里用同步的方法
            // path.join()也是path里面的方法,主要用来合并路径的
            // 'src/*.html' 表示扫描每个html的css
            paths: glob.sync(path.join(__dirname, 'src/*.html'))
        })
    ],
    //配置webpack开发服务器功能
    devServer: {
        // 设置基本目录结构
        contentBase: path.resolve(__dirname, 'dist'),
        //服务器的ip地址 可以使用ip也可以使用localhost
        host: 'localhost',
        //服务器压缩是否开启
        compress: true,
        //配置服务端口号
        port: 9999,
        //启动webpack-dev-server时自动打开浏览器
        open:false,
        //启用热更
        hot:true
    }
}
module.exports = config

压缩css文件

OK，到这步我们已经可以完成大部分的打包任务了，但是发现打出来的css文件还是和编写的一样，没有进行压缩操作。接下来我们就来压缩css文件。

安装插件optimize-css-assets-webpack-plugin

npm i optimize-css-assets-webpack-plugin -D

const path = require('path');//处理路径信息
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const PurifyCssWebpack = require('purifycss-webpack');
const glob = require('glob');
const HtmlWebpackPlugin = require('html-webpack-plugin');//引入html-webpack-plugin
const webpack = require('webpack');//热更新
const uglify = require('uglifyjs-webpack-plugin');//压缩js
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');//压缩css插件

const config = {
    mode: 'development', // development || production
    entry: path.resolve(__dirname, 'src/index.js'),//webpack 打包入口文件
    output: {
        path: path.resolve(__dirname, 'dist'),//打包完成放置位置
        filename: 'main.js',//打包后的文件名
    },
    module: {//例如如何解读css,图片如何转换，压缩等
        rules: [
            {
                test: /\.js$/, //匹配所有的js文件
                exclude: /node_modules/,//除了node_modules以外
            },
            //配置css loaders
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader', // 编译后用什么loader来提取css文件
                    use: ['css-loader', 'postcss-loader'],//需要什么样的loader去编译文件
                    publicPath: '../' //解决css背景图的路径问题
                })
            },
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader','less-loader']//防置再最后的loader首先被执行
                })
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })
            },
            {
                test:/\.(png|jpg|gif|jpeg)/,  //匹配图片文件后缀名称
                use:[{
                    loader:'url-loader', //是指定使用的loader和loader的配置参数
                    options:{
                        limit:500  //把小于500B的文件打成Base64的格式，写入JS
                    }
                }]
            }
        ]
    },
    //插件，用于生产模板和各项功能
    plugins: [
        new uglify(),//压缩js文件
        new ExtractTextPlugin("styles.css"),
        new OptimizeCssAssetsPlugin(),//执行压缩抽离出来的css
        new webpack.HotModuleReplacementPlugin(),//在webpack工程中要实现热加载，就是只更新局部的修改
        new webpack.NoEmitOnErrorsPlugin(),//热更相关插件
        new HtmlWebpackPlugin({
            template: 'src/index.html', //模板地址
            filename:'index.html',//生成的dist下的模板名称
            minify:{
                removeComments:true,
                collapseWhitespace:true
            }
        }),
        new PurifyCssWebpack({ //消除冗余代码
            // 首先保证找路径不是异步的,所以这里用同步的方法
            // path.join()也是path里面的方法,主要用来合并路径的
            // 'src/*.html' 表示扫描每个html的css
            paths: glob.sync(path.join(__dirname, 'src/*.html'))
        })
    ],
    //配置webpack开发服务器功能
    devServer: {
        // 设置基本目录结构
        contentBase: path.resolve(__dirname, 'dist'),
        //服务器的ip地址 可以使用ip也可以使用localhost
        host: 'localhost',
        //服务器压缩是否开启
        compress: true,
        //配置服务端口号
        port: 9999,
        //启动webpack-dev-server时自动打开浏览器
        open:false,
        //启用热更
        hot:true
    }
}
module.exports = config

配置支持ES6+

到上面的步骤我们都是在webpack支持编译js的情况下进行的，现在我们改写配置让其可以编译ES6以上的js代码。

这里我们需要使用bable相关插件

npm i babel-core babel-loader babel-preset-env babel-plugin-transform-class-properties -D

如遇以下错误，请修改bable-loader版本

在这里插入图片描述

npm i bable-loader@7 -D

配置后的webpack.config

const path = require('path');//处理路径信息
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const PurifyCssWebpack = require('purifycss-webpack');
const glob = require('glob');
const HtmlWebpackPlugin = require('html-webpack-plugin');//引入html-webpack-plugin
const webpack = require('webpack');//热更新
const uglify = require('uglifyjs-webpack-plugin');//压缩js
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');//压缩css插件

const config = {
    mode: 'development', // development || production
    entry: path.resolve(__dirname, 'src/index.js'),//webpack 打包入口文件
    output: {
        path: path.resolve(__dirname, 'dist'),//打包完成放置位置
        filename: 'main.js',//打包后的文件名
    },
    module: {//例如如何解读css,图片如何转换，压缩等
        rules: [
            {
                test: /\.js$/, //匹配所有的js文件
                exclude: /(node_modules|bower_components)/,//除了node_modules等以外
                use: {
                    loader: "babel-loader",
                    options:{
                        presets:['env'],
                        plugins:['transform-class-properties']
                    }
                }
            },
            //配置css loaders
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader', // 编译后用什么loader来提取css文件
                    use: ['css-loader', 'postcss-loader'],//需要什么样的loader去编译文件
                    publicPath: '../' //解决css背景图的路径问题
                })
            },
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader','less-loader']//防置再最后的loader首先被执行
                })
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })
            },
            {
                test:/\.(png|jpg|gif|jpeg)/,  //匹配图片文件后缀名称
                use:[{
                    loader:'url-loader', //是指定使用的loader和loader的配置参数
                    options:{
                        limit:500  //把小于500B的文件打成Base64的格式，写入JS
                    }
                }]
            }
        ]
    },
    //插件，用于生产模板和各项功能
    plugins: [
        new uglify(),//压缩js文件
        new ExtractTextPlugin("styles.css"),
        new OptimizeCssAssetsPlugin(),//执行压缩抽离出来的css
        new webpack.HotModuleReplacementPlugin(),//在webpack工程中要实现热加载，就是只更新局部的修改
        new webpack.NoEmitOnErrorsPlugin(),//热更相关插件
        new HtmlWebpackPlugin({
            template: 'src/index.html', //模板地址
            filename:'index.html',//生成的dist下的模板名称
            minify:{
                removeComments:true,
                collapseWhitespace:true
            }
        }),
        new PurifyCssWebpack({ //消除冗余代码
            // 首先保证找路径不是异步的,所以这里用同步的方法
            // path.join()也是path里面的方法,主要用来合并路径的
            // 'src/*.html' 表示扫描每个html的css
            paths: glob.sync(path.join(__dirname, 'src/*.html'))
        })
    ],
    //配置webpack开发服务器功能
    devServer: {
        // 设置基本目录结构
        contentBase: path.resolve(__dirname, 'dist'),
        //服务器的ip地址 可以使用ip也可以使用localhost
        host: 'localhost',
        //服务器压缩是否开启
        compress: true,
        //配置服务端口号
        port: 9999,
        //启动webpack-dev-server时自动打开浏览器
        open:false,
        //启用热更
        hot:true
    }
}
module.exports = config

到此为止基础的webpack打包教程已经告一段落，详细的配置代码见github。

如有不恰当之处，还请指出。

xjl271314
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
详解webpack打包
2401_84437095的博客
05-04 69
阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
Vue+webpack项目基础配置教程
11-30
这个部分主要讲了如何配置webpack的环境，以及webpack dev的配置。 记录比较粗略，后续会更新。 1.开发环境：vscode,node.js,vue.js,webpack 大家自己安装一下node.js可以参考菜鸟教程 使用的IDE是 VScode 2.项目...
Webpack5基本使用及基础配置
小洋人最happy的专栏
05-21 760
文章目录一、前言1.1 为什么需要打包工具1.2 有哪些打包工具二、基本使用2.1 简介2.2 基础使用2.2.1 资源目录2.2.2 创建文件2.2.3 下载依赖2.2.4 启用Webpack2.2.4.1 开发模式2.2.4.2 生产模式2.2.5 观察输出文件2.3 小结三、基本配置3.1 五大核心概念3.2 编写Webpack 配置文件3.3 运行指令3.3 小结 一、前言 1.1 为什么需要打包工具 简单来说，在开发中，我们会使用框架（React、Vue），ES6 模块化语法，Less/Sass
Webpack5打包-禁止生成LICENSE文件
LYFlied的博客
03-05 5816
问题背景 最近将项目中的Webpack3升级到了Webpack5，打包之后发现输出文件中多了一些LICENSE文件，如下图所示： 看着就感觉怪怪的，和升级之前的输出文件不一样，总感觉是那处了问题，于是查阅资料… 问题分析 多输出了一些文件，那这可能是打包的输出配置出了岔子或者是用的插件中配置不太对。 于是检查自己的配置… 没发现什么问题呀…没看到有啥配置会让我打包输出这些文件的… 于是再仔细看看官方文档吧。 果然在这里发现了蛛丝马迹： Webpack 5 默认压缩代码工具为terser-webpack-
由浅入深配置webpack4
油墨香^-^的博客
03-30 621
webpack在前端化过程中十分重要，所以花了一段时间学习webpack，以及webpack4新特性，本文是按照从易到难的过程，梳理部分webpack概念，常见的loader，plugins，webpack4新特新，还有部分高级概念。webpack需要掌握的核心概念👇Entry:webpack开始构建的入口模块Output: 如何命名输出文件，以及输出目录，比如常见的dist目录。Loaders:作用在于解析文件，将无法处理的非js文件，处理成webpack能够处理的模块。Plugins。
wepack4配置入门
letianxf的博客
03-01 670
webpack4生产环境，开发环境配置入门
Taro多端开发及编译踩坑
Stavin Li的博客
10-25 2967
taro项目搭建及初始化，基于微信小程序，编译成H5及支付宝小程序踩坑，持续更新
webpack打包vue项目基础配置
09-26
基于webpack4的一个针对vue基础项目的打包配置，对基础的vue项目进行简单的打包配置，可以支持less，scss，sass等css预编译，简单明了，教程：https://www.jianshu.com/p/81bfe6ba1c04
Webpack 完整注释 打包教程
03-26
2. **输出（Output）**：指定Webpack打包后的文件输出位置和文件名，通常包括主bundle文件和其他chunk文件。 3. **加载器（Loaders）**：用于转换模块，例如将ES6代码转化为ES5，或者将SCSS转换为CSS。每个loader都...
webpack打包教程.zip_webpack打包原理vue
12-24
Webpack 是一个强大的模块打包工具，尤其在前端开发中被广泛使用。它的工作原理是将JavaScript、CSS、图片等资源视为“模块”，通过一系列配置和插件进行编译、打包，生成适合生产环境的静态资源。在Vue.js项目中，...
关于webpack5打包时生成LICENSE.txt文件的解决方案
随心所欲的便笺
05-21 3389
问题 最近在使用webpack5进行打包时，多出了一个LICENSE.txt的文件，查阅官网资料，找到了解决办法。 官方： https://webpack.js.org/plugins/terser-webpack-plugin/ 如何解决？ 原因 解决办法 module.exports = { optimization: { minimize: true, minimizer: [new TerserPlugin({ extractCom
webpack配置和使用vue报错以及解决方案
weixin_42748455的博客
11-24 573
问题一： npm install --save-dev vue-loader vue-template-compiler 该命令安装的vue-loader版本过高导致 npm run build打包时报错 解决方案 1. 在webpack.config.js中增加配置 const path = require("path") const VueLoaderPlugin = require('vue-loader/lib/plugin'); mo...
正确安装webpack version @4+，less loader , ERROR Module build failed，cannot find module xxxx
SSLJY_YCFH的博客
09-24 237
只需两步 轻松闭坑 // 全局安装，作为指令使用 npm install webpack webpack-cli -g // 本地安装，作为本地依赖使用 npm install webpack webpack-cli -D
webpack
weixin_37711211的博客
01-10 127
webpack 一、快速上手 1、yarn init 2、yarn add webpack webpack-cli --dev 3、yarn webpack --version 4、yarn webpack const path = require('path') module.exports = { // 这个属性有三种取值，分别是 production、development 和 none。 // 1. 生产模式下，Webpack 会自动优化打包结果； // 2. 开发模式下，Webpac
webpack4 打包模板配置
weixin_43294560的博客
01-09 892
命令打包: webpack 起始文件 -o 输出文件 --mode=开发模式 -o为--output-path的简写 路径中的.为整个项目的根路径 如: webpack ./src/index.js -o ./build/build.js --mode=development webpack ./src/index.js -o ./build/build.js --mode=production 开发环境和生产环境会将es6模块编译成浏览器能识别的模块 生产环境
terser-webpack-plugin 替代uglifyjs-webpack-plugin
Qin的专栏
07-04 755
terser-webpack-plugin参考文档 把webpack升级到4+升级过程参考https://blog.csdn.net/Uookic/article/details/115655538
学习之webpack基础配置
那一日面朝大海的博客
04-15 1132
一、webpack 简介 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 简单说，webpack可以看做是一个模块打包机，主要作用就是:分析你的项目结构，找到JavaScript模块以及一些浏览器不能直接运行的拓展语言(sass、less、typesc.
推荐使用：License Webpack Plugin - 管理你的第三方许可协议的利器
最新发布
gitblog_00081的博客
06-06 291
推荐使用：License Webpack Plugin - 管理你的第三方许可协议的利器 项目地址:https://gitcode.com/xz64/license-webpack-plugin 在开发过程中，我们经常会引入各种第三方库，如何管理和显示这些库的许可协议信息呢？这就是License Webpack Plugin发挥作用的地方。这个插件是为了解决在webpack构建中集成第三方许可证管...
webpack5.0配置 填坑记
gbzaq12359的博客
03-25 550
HtmlWebpackPlugin 在配置时需要特别注意 template属性的配置，建议使用默认配置，可以在filename配置时更改index.html文件的存放位置 webpack5.0中会自动生成 .LICENSE.txt后缀的文件，但是这个文件对我们来说其实是没什么意义的。如下图： 是因为 Webpack 5.0 默认压缩代码工具为terser-webpack-plugin，该工具默认会生成 LICENSE.txt 文件。 解决：npm install terser-webpack-plu
webpack打包配置
09-06
对于webpack的打包配置，你可以创建一个名为webpack.config.js的文件来定义你的配置选项。下面是一个基本的webpack配置示例： ```javascript const path = require('path'); module.exports = { entry: './src/index.js', // 入口文件 output: { path: path.resolve(__dirname, 'dist'), // 输出目录 filename: 'bundle.js' // 输出文件名 }, module: { rules: [ { test: /\.js$/, // 对所有.js文件应用以下loader exclude: /node_modules/, // 排除node_modules目录 use: { loader: 'babel-loader', // 使用babel-loader进行转译 options: { presets: ['@babel/preset-env'] // 使用@babel/preset-env进行转译 } } }, // 可以添加其他loader规则，如处理CSS、图片等 ] }, // 可以添加其他配置项，如插件、devServer等 }; ``` 这个例子展示了一个最基本的webpack配置，它定义了入口文件、输出目录和文件名，以及使用babel-loader对JavaScript文件进行转译的规则。你可以根据项目需求添加其他loader和插件，并配置其他选项。 请注意，这只是一个简单的示例，具体的配置取决于你的项目需求。你可以根据自己的需要进行进一步的配置和调整。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值