webpack文件的打包配置

开发环境的使用场景

• 项目开发：分为2种模式，一种叫开发模式，一种叫生产环境
• 开发环境：项目开发阶段过程用开发服务器来打包项目，就叫做开发模式
• 生产环境：项目完成了需要通过npm run build来打包项目，也就叫做生产环境

module.exports = {
 //开发环境使用development表示，生产环境使用probuction表示
 mode:"development"
}

配置打包后自动创建html打包文件及js打包文件的自引用

0. 下载插件：npm install html-webpack-plugin -D
1. 给webpack.config.js添加配置

//hangingPunctuation插件
//自动根据我们html模块生成打包到dist文件，会自动生成引入打包后的js文件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    //设置打包入口文件，需要打包的文件名许得和设置入口一致否则报错
    entry: './src/main.js',
    //plugins：是webpack提供专门给插件添加配置区域
    plugins: [
        new HtmlWebpackPlugin({
            // template: 模板，也就是将来打包的到dist文件中的html是根据这个模块html生成的
            // 如何没有配置模板，会自动生成一个html打包到dist文件中。
            template: './public/index.html'
        })
    ]}

3. 执行 npm run build 自定义命令，查看打包效果是否实现

css文件的打包处理

module: {
        rules: [
            {   
/**css文件的打包处理
                 * 1.下载加载器：npm i css-loader style-loader -D
                 *      style-loader：将css插入到DOM
                 *      css-loader：让webpack处理css类型文件
                 * 2.添加配置{
                 *      test: /.css$/i,//正则表达式。匹配以.css为结尾的文件
                 *      use: ['style-loader', 'css-loader']}
                 * 3.创建src/less/index.less文件，然后写上样式
                 * 4.在src目录下main.js文件中引入要打包的css文件
                 * 执行打包命令，在浏览器中查看效果是否执行
                 */
                test: /.css$/i,//正则表达式。匹配以.css为结尾的文件
                //表示用下载的两个加载器来处理css文件，书写顺序不能更改
                use: ['style-loader', 'css-loader']
            },

less文件的打包处理

module: {
        rules: [
             {
/**less文件的打包处理
                 * 1.下载加载器  npm i less less-loader -D
                 * 2.添加配置{
                 *    test: /.less$/,
                 *    use: ['style-loader', 'css-loader', 'less-loader'] 
                 *    }
                 * 3.创建src/less/index.less文件，然后写上样式
                 * 4.在src目录下的main.js文件中引入要打包的less文件
                 * 执行打包命令，在浏览器中查看效果是否执行
                 */
                test: /.less$/i,
                //表示用下载的三个加载器来处理css文件，书写顺序不能更改
                use: ['style-loader', 'css-loader', 'less-loader']
            },

图片的打包处理

module: {
        rules: [
             {
/**图片的处理不需要下载加载器
                 * 1.匹配指定后缀名的图片
                 * 2.设置type:'asset'属性利用webpack进行图片处理
                 * 3.在src目录下的main.js文件中引入要打包的图片路径
                 * 4.在main.js文件实现想要的效果
                 * 执行打包命令，在浏览器中查看效果是否执行
                 */
​
                test:/.(png|jpg|gif|jpeg)$/i, 
                /**type:'asset'的作用
                 * 它利用webpack5的asset module技术实现webpack处理图片
                 * 当图片小于8kb时，将图片转为base64格式大于8kb直接输出图片文件
                 */
                type:'asset'
            },

字体图标的打包处理

module: {
        rules: [
             {
/**图片的处理不需要下载加载器
                 * 1.匹配指定后缀名的图片
                 * 2.设置type:'asset'属性利用webpack进行图片处理
                 * 3.在src目录下的main.js文件中引入要打包的图片路径
                 * 4.在main.js文件实现想要的效果
                 * 执行打包命令，在浏览器中查看效果是否执行
                 */
​
                test:/.(png|jpg|gif|jpeg)$/i, 
                /**type:'asset'的作用
                 * 它利用webpack5的asset module技术实现webpack处理图片
                 * 当图片小于8kb时，将图片转为base64格式大于8kb直接输出图片文件
                 */
                type:'asset'
            },