webpack 知识点总结 vue发展方向有帮助

webpack 概念： 前端工程化解决方案

webpack 功能：提供了友好的模块化开发支持，以及代码压缩混淆，浏览器端javascript兼容性，性能优化等强大的功能

webpack好处： 让前端开发者更专注于功能开发，提高了项目开发效率，以及项目的可维护性

目录

首先，新建项目

安装webpack 跟 webpack-cli 让其支持webpack  

webpack 的4.x, 5.x默认约定：

设置webpack server

使用 html-webpack-plugin 

 处理css 文件

打包处理less文件

打包js文件中的高级语法

clean-webpack-plugin

---

npm init -y

生成package.json 文件

在根目录下新建 src 目录

目录中新建 index.js 跟 index.html

安装webpack 跟 webpack-cli 让其支持webpack  

npm install webpack webpack-cli -D

在根目录下新建webpack.config.js 在里面写代码

module.exports = {
    mode:'development'
}

mode 可选值

development  生成代码的速度快  代码体积大 

production: 生成的代码速度慢 代码体积小  

webpack 的4.x, 5.x默认约定：

打包入口 src->index.js

输出 dist->main.js

可以通过webpack.config.js 中对应的参数 修改入口跟输出

module.exports = {

    mode:'development',
    entry:path.join(__dirname,'./src/index.js'),
    output:{
        path:path.join(__dirname,'dist'), //地址
        filename:'script/bundle.js'  //dist/script/bundle.js输出文件名称
    }

}

设置webpack server

npm install webpack-dev-server -D

安装好之后 在package.json 中 修改dev

module.exports = {
    script:'webpack serve'
}

 安装html-webpack-plugin 将html生成到根目录的内存中

npm install html-webpack-plugin -D

使用 html-webpack-plugin 

//在webpack.config.js中使用

const HtmlPlugin = require('html-webpack-plugin')

const htmlPlugin = new HtmlPlugin({template:'./src/index.html',filename:'index.html'})

module.exports = {
    plugins:[htmlPlugin]
}

template :要复制的的html文件    filename ： 生成的文件名称

在webpack 中设置devserver 

三个参数  port  open  host  分别是 端口号  是否启动热服务后 直接打开默认浏览器  这只地址

module.exprts = {
    deveServer :{
        port:80,
        open:true,
        host:'127.0.0.1'
    }
}

 处理css 文件

npm install style-loader css-loader -D

在webpack.config.js 进行配置

module.exports = {
    module:{rule:
            [test:'/\.css$/',use:['style-loader','css-loader']
            }
}

test 表示匹配的文件类型， use 表示要调用的loader 

注意 ： use 数组中指定的loader顺序是固定的

多个loader 的顺序应该是从后往前调用。

打包处理less文件

npm install less-loader less -D

同样的跟上边一行 在webpack.config.js中

module:{
    rules:{
        {test:/\.less$/,use:['style-loader','css-loader','less-loader']}
    }
}

打包处理 样式表中与url 相关的文件，例如 img

npm install url-loader file-loader -D

添加的规则如下

{test:/\.jpg|png|gif$/,use:'url-loader?limit=22222&outputPath=image']}

limit 是图片的大小 outputPath是打包后的文件存放地址

打包js文件中的高级语法

babel 修饰器插件官网地址  @babel/plugin-proposal-decorators · Babel 中文网

npm install babel-loader @babel/core @babel/plugin-proposal-decorators

在根目录城建 babel.config.js,并放入一下内容

module.exports = {
  plugins: [["@babel/plugin-proposal-decorators", { legacy: true }]],
};

再在webpack.config.js 中 进行规则配置如下

{
    test:/\.js$/,use:'babel-loader',exclude:'./node-module'
}

exclude 排除  include 包含

clean-webpack-plugin

在生成新的dist文件时  自动删除 dist 老文件

npm install clean-webpack-plugin -D

使用

const {CleanWebpackPlugin} = require(clean-webpack-plugin)
const clean = new CleanWebpackPlugin()

module.exports = {
    plugins:[clean]
}