前端打包工具-webpack

2024-01-31 12:53:04

文章目录

初始化项目

初始化项目

##webpack安装

创建package.json，执行npm init一路按enter键就搞定了

安装webpack基本包

# `webpack4.x` 必须安装`webapck-cli`，这是一个注意事项
npm install --D webpack webpack-cli webpack-dev-server

新建src/index.js，添加代码如下
```
console.log("hello world")
```
在package.json执行脚本script路径下添加"build":"webpack"
在终端执行npm run build，可以看到在根目录生成了dist/main.js的打包文件，这是webpack4.x打包默认找src/index.js打包入口。

配置`webpack`

新建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>react demo</title>
</head>
<body>
    <div id="app">
    </div>
</body>
</html>

项目根目录创建build目录，创建webpack.base.conf.js，webpack.dev.conf.js，webpack.prod.conf.js，utils.js

// ==============
// utils.js
// ==============
const path = require('path');

exports.resolve = function(dir){
    return path.resolve(__dirname, dir);
}

// ======================
// webpack.base.conf.js
// ======================
const utils = require("./utils")

module.exports = {
    entry: {
        app: "./src/index"
    },

    output: {
        path: utils.resolve("../dist"),
        filename: "js/[name].[hash].js",
        publicPath: "/"
    },

    module: {

    }
}

// ======================
// webpack.dev.conf.js
// ======================
const { merge } = require("webpack-merge")
const utils = require('./utils')
const baseWebpackConf = require("./webpack.base.conf")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = merge(baseWebpackConf, {
    mode: "development",
    plugins: [
        new HtmlWebpackPlugin({
            filename: utils.resolve('../dist/index.html'), // html模板的生成路径
            template: 'src/index.html',//html模板
            inject: true, // true：默认值，script标签位于html文件的 body 底部
            hash: true, // 在打包的资源插入html会加上hash
            //  html 文件进行压缩
            minify: {
                removeComments: true,               //去注释
                collapseWhitespace: true,           //压缩空格
                removeAttributeQuotes: true         //去除属性 标签的 引号  例如 <p id="test" /> 输出 <p id=test/>
            }
        })
    ],
    devServer: {

    }
})

// ======================
// webpack.prod.conf.js
// ======================

安装html打包插件，并完成模板
```
npm install --D html-webpack-plugin
```
修改package.json的build命令为指定配置文件构建打包。
```
"build": "webpack --config build/webpack.config.js"，
```
再次执行 npm run build，可以看到html模板和js文件成功打包进dist目录

配置开发环境

添加package.json命令，

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

再次执行npm run dev，访问localhost:8080，成功进入页面

更多`webpack`配置

添加路径别名：

// 在 webpack.base.conf.js的module.exports下
resolve: {
	// 解析扩展。（当我们通过路导入文件，找不到改文件时，会尝试加入这些后缀继续寻找文件）
    extensions: ['.js', '.json'], 
    alias: {
        // 在项目中使用@符号代替src路径，导入文件路径更方便
        '@': path.join(__dirname, '..', "src") 
    }
},

服务部署时配置：

const baseWebpackConfig = require("./webpack.base.conf")
const { merge } = require("webpack-merge")
const utils = require("./utils")
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = merge(baseWebpackConfig, {
    // 指定构建环境
    mode: "development",
    // 插件
    plugins: [],
    devServer: {
        historyApiFallback: true, // 当找不到路径的时候，默认加载index.html文件
        hot: true,          // 热部署
        contentBase: false, // 告诉服务器从哪里提供内容。只有在你想要提供静态文件时才需要
        compress: true,     // 一切服务都启用gzip 压缩：
        port: "8081",
        publicPath: "/",   // 访问资源加前缀
        proxy: {
        }
    }
})

+++

码农公寓

文章目录

初始化项目

配置webpack

配置开发环境

更多webpack配置

相关文章

配置`webpack`

更多`webpack`配置