webpack基本上使用 保姆级

项目开始

在空目录下 npm init -y 新建一个src文件夹 新建一个index.html index.js

---

一、webpack安装

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

1. 新建webpack配置文件 webpack.config.js

	module.exports = {
	    mode: 'development'
	}

2.在packjson中添加命令

  "scripts": {
    "dev": "webpack"
  },

然后运行 npm run dev 启动webpack进行打包构件

然后会出现一个dist文件夹 里面有main.js index.html 引入该js就可以使用

3.webpack 传入和输出

在webpack4.x h和5.x版本中
默认的打包入口文件为 src -> index.js
默认的输出文件路径为 dist ->main.js

自定义打包入口和输出
entry 指定入口

const path = require('path')
module.exports = {
    mode: 'production', // production development
    entry: path.join(__dirname, './src/index.js')// 指定要处理哪个文件
}

output 指定输出

const path = require('path')
module.exports = {
    mode: 'production', // production development
    entry: path.join(__dirname, './src/index.js'),// 指定要处理哪个文件
    // 指定生成的文件
    output: {
        // 存放的目录
        path: path.join(__dirname, 'dist'),
        // 生成的文件名
        filename: "main.js"
    }
}

4.实现热更新

最常用的有俩种插件
webpack-dev-server
类似于nodejs用的nodemon
每当修改源码就会对项目进行打包构件
html-webpack-plugin
webpack的html插件
可以自定义index.html的内容

安装 webpack-dev-server

npm install webpack-dev-server@3.11.2 -D

//  安装好后 需要配置
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack serve"
  },

然后再次运行 npm run dev
***** 注意插件会把生成的文件放在内存中 而不是物理磁盘中***
所以你要引用内存中的文件 不要引用dist文件夹里的文件

安装 html-webpack-plugin@5.3.2 -D

配置 html-webpack-plugin

const path = require('path')
// 1. 导入 html 插件 得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')
// 2. 创建html 插件的实例对象
const htmlPlugin = new HtmlPlugin({
    template: './src/index.html', // 指定原文件的存放路径
    filename: './index.html', // z指定生成的文件的存放路径
})
module.exports = {
    mode: 'development', // production development
    entry: path.join(__dirname, './src/index.js'),// 指定要处理哪个文件
    // 指定生成的文件
    output: {
        // 存放的目录
        path: path.join(__dirname, 'dist'),
        // 生成的文件名
        filename: "main.js"
    },
    plugins: [htmlPlugin] // 通过plugins节点 使plugins 生效
}

用了这个插件 直接访问项目根目录 就会有页面 复制一个页面还是在内存里

5.webpack loader

webpack默认只能打包处理.js文件
由于代码中包含了css文件 处理不了 就得寻找loader加载器
webpack会把css交给最后一个进行处理 ‘css-loader’ 处理结果再给下一个loader ‘style-loader’ 处理完毕后 结果交给webpack 再把结果合并到main.js中

npm i style-loader@3.0.0 css-loader@5.2.6 -D

然后再 webpack.config.js 的 module-> rules中添加 loader

  module: {
        rules: [ // 文件后缀名匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader']}
        ]
    }

less

使用less 并引入的时候会报错 提示需要一个合适的loader

npm i less-loader@10.0.1 less@4.1.1 -D

然后再rules里引入

module: {
        rules: [ // 文件后缀名匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader']},
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
        ]
    }

打包处理url路径相关的文件

npm i url-loader@4.1.1 file-loader@6.2.0 -D

module: {
        rules: [ // 文件后缀名匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader']},
            // 处理less的loader
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
        //    处理url 相关文件 只有小于limit的图片才会被转化为base64 小于或等于时才会转化为base64
            { test: /\.jpg|png|gifs/, use: 'url-loader?limit=22229'}
        ]
    }

打包处理js高级语法

webpack只能打包处理一部分高级的javascript语法 有些无法处理的得借助babel-loader 进行打包处理

//  安装依赖
npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

添加规则

 module: {
        rules: [ // 文件后缀名匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader']},
            // 处理less的loader
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
        //    处理url 相关文件
            { test: /\.jpg|png|gifs/, use: 'url-loader?limit=22229'},
        //    必须使用exclude 指定排除项 node_modules 不需要被打包
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}
        ]
    }

都写完之后 还需要在项目根目录配置 babel-loader

// 项目根目录新建 babel.config.js文件
module.exports = {
    plugins:[
        ['@babel/plugin-proposal-decorators', {legacy: true}]
    ]
}

打包发布

在package.json中新增build命令

–mode 指定webpack运行模式 production代表生产模式 会对打包生成的文件进行代码压缩和性能优化

 "scripts": {
    "dev": "webpack serve",
    "build": "webpack --mode production"
  },

打包 图片资源处理

webpack.config.js 中在url-loader 新增outputPath即可指定
当然也可以再多个参数之间使用&连接

// url-loader?limit=470&outputPath=iamges
module: {
        rules: [ // 文件后缀名匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader']},
            // 处理less的loader
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
        //    处理url 相关文件
            { test: /\.jpg|png|gifs/, use: {
                loader: 'url-loader',
                options: {
                    limit: 22228,
                    outputPath: 'image'
                }
             }},
        //    必须使用exclude 指定排除项 node_modules 不需要被打包
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}
        ]
    }

打包后自动清理 dist旧文件

为了每次打包发布的时候 自动清理dist旧目录中的旧文件可以安装

npm install clean-webpack-plugin@3.0.0 -D

之后按需导入插件 得到插件函数后创建插件的是对象

const path = require('path')
// 1. 导入 html 插件 得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')
// 2. 创建html 插件的实例对象
const htmlPlugin = new HtmlPlugin({
    template: './src/index.html', // 指定原文件的存放路径
    filename: './index.html', // z指定生成的文件的存放路径
})
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const cleanPlugin = new CleanWebpackPlugin()
module.exports = {
    mode: 'development', // production development
    entry: path.join(__dirname, './src/index.js'),// 指定要处理哪个文件
    // 指定生成的文件
    output: {
        // 存放的目录
        path: path.join(__dirname, 'dist'),
        // 生成的文件名
        filename: "js/main.js"
    },
    plugins: [htmlPlugin, cleanPlugin], // 通过plugins节点 使plugins 生效
    devServer: {
        open: true, // 自动打开浏览器
        host: '127.0.0.1',
        port: 8081
    },
    module: {
        rules: [ // 文件后缀名匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader']},
            // 处理less的loader
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
        //    处理url 相关文件
            { test: /\.jpg|png|gifs/, use: {
                loader: 'url-loader',
                options: {
                    limit: 22228,
                    outputPath: 'image'
                }
             }},
        //    必须使用exclude 指定排除项 node_modules 不需要被打包
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}
        ]
    }
}

当代码出现问题时

可以配置
在开发阶段 建议大家把devtool的值设置为eval-source-amp 可以精确定位到具体的错误行
实际发布的时候 设置为 nosource-source-map 防止源码泄露

设置为 source-map的时候可以知道问题出现在源码的哪里

devtool: 'scource-map'

建议使用@表示src源代码目录 从外往里找 不要用…/ 当然不能直接用 得配置

reslove:{
	alias:{
	// 告诉webpack @ 从哪里开始
		'@': path.join(__dirname,'./src/')
	}
}