webpack基础配置说明

Webpack

1. 项目初始化 yarn init -y
2. 安装webpack : yarn add webpack webpack-cli --dev(意为把webpack相关依赖安装到开发者依赖里来，最后打包的代码里不需要在使用webpack了)
3. code . 用vscode打开当前目录的项目

4．写项目

5.  npx webpack打包生成dist

6.  在根目录下新建webpack.config.js配置文件

7.如果把css文件引入js文件在打包可能出错，所以需要安装一些loader

yarn add –dev style-loader css-loader

8.  yarn add html-webpack-plugin --dev  此插件可以自动生成打包后的html文件

9.在开发项目的时候，有时候可能需要使用新版本js的特性，但是要兼容低版本的浏览器，所有要利用babel这个工具转义我们的js代码

yarn add –dev babel-loader @babel/core @babel/perset-env

10.压缩打包后的代码，这样可以减少文件的体积

    yarn add –dev terser-webpack-plugin

11.webpack工具每次我们修改js代码后都会自动打包

     yarn add --dev webpack-dev-server

12.很多时候我们打包后，会发现有些文件的体积过大，所有我们需要分析一下原因，再进行下一步的优化，webpack提供打包后可视化的工具

   yarn add --dev webpack-bundle-analyzer

13. 在webpack.config.js内编写webpack的基础属性：

     const path=require(“path”);

     const HtmlWebpackPlugin=require(“html-webpack-plugin”);

     const TerserPlugin=require(“terser-webpack-plugin”)

     const BundleAnalyzerPlugin=require(“webpack-bundle-analyzer”)

     module.exports={

         mode:”development”,  //设置为开发环境，便于以后开发进行更改

         devtool:”inline-source-map”,  //配置此项后方便查看打包后的源代码

//devtool:"source-map",

         entry:”./src/index.js”,   //入口文件名，可以使用默认值

         output:{            

 filename:”dist.js”,   //配置打包后的文件名

//为了防止文件名一样，浏览器会缓存我们之前打包好的dist.js文件，所有我们希望每次文件名不一样，所有就决定在文件名上加上随机的字符，让每次更新打包之后都改为新的字符

      //filename:”[name].[contenthash].js”,

   path:path.resolve(__dirname,’dist’),      

//打包后文件的存放目录

// __dirname：用来动态获取当前文件模块所属目录的绝对路径;

//__filename：用来动态获取当前文件的绝对路径

   },

optimization:{

minimize:true,

minimizer:[new TerserPlugin()],

},//文件压缩

devServer:{

static:”./dist”,

},//设置每次修改都会自动打包的开发服务器，为了方便运行开发服务器需要在package.json里添加新的配置项”scripts”:{“start”:”webpack serve --open”},配置之后只要运行yarn start即可

plugins:[new HtmlWebpackPlugin({

       title:”HTML标题”  // html-webpack-plugin支持设置生成的html标题

}),

New BundleAnalyzerPlugin.BundleAnalyzerPlugin(),//打包后体积可视化，注意导入的是一个对象

]

//对于loader需要在webpack中配置

//匹配以什么样的扩展名结尾的文件，去应用什么样的loader

module:{

   rules:[{

      test:/\.css$/i, //匹配所有以css结尾的文件,忽略大小写

      use:[“style-loader”,”css-loader”],

},{

//如何加载图片

                test:/\.(png|svg|jpg|jpeg|gif)$/I,

                type:’asset/resource’,

//此处使用的是webpack内置的loader(原本就具有打包图片的功能)，所有用type

},{

test:/\.js$/,              //匹配js结尾的文件

exclude:/node_modules/,   //不要去转义node_modules下面的代码

use:{

loader:”babel-loader”,

options:{

presets:[“@babel/preset-env”]

}

}

}

],  //数组中的每一个元素都对应一个loader的配置，每个loader的配置都包含匹配扩展名，以及使用哪些loader的相关的选项

}

}