webpack打包资源（一）

打包资源

需要配置webpack.config.js文件

作用：指示webpack干哪些活（当你运行webpack指令时，会加载里面的配置）

注：所有的构建工具都是基于nodejs平台运行的，模块化默认才用commonjs

打包样式资源

//resolve用来拼接绝对路径的方法
const {resolve} = require("path");
module.exports = {
    //webpack配置
    //入口起点
    entry:'./src/index.js',
    //输出
    output: {
        //输出文件名
        filename:"built.js",
        //输出路径
        //_dirname  nodejs的变量，代表当前文件的目录绝对路径
        path: resolve(__dirname,'build')
    },
    module:{
        rules:[
            //详细loader的配置
            {
                //匹配哪些文件
                test:/\.css$/,
                //使用哪些loader
                use:[
                    //use数组中loader执行顺序：从右到左，从上到下，依次执行
                    //创建style标签，将js中的样式资源插入进行，添加到head中生效
                    'style-loader',
                    //将css文件变成commonjs模块加载到js中，里面内容是样式字符串
                    'css-loader'
                ]
            }
        ]   
     },
    plugins:[
        //详细plugins的配置
    ],
    mode:'development'//开发模式
    //mode:"production"
}
​
/*终端依次输入
npm init
npm i webpack webpack-cli -D
npm i webpack webpack-cli -g
//安装loader
npm i css-loader style-loader -g
npm i css-loader style-loader -D
//我是在webpack5下运行的，指令为
npx webpack
(直接输入webpack无法识别)
*/

如若要在引用less文件，loader的配置不能复用，需要在数组中再加一个配置对象

module:{
        rules:[
            //详细loader的配置
            //不同文件必须配置不同的loader处理
            {
                //匹配哪些文件
                test:/\.css$/,
                //使用哪些loader
                use:[
                    //use数组中loader执行顺序：从右到左，从上到下，依次执行
                    //创建style标签，将js中的样式资源插入进行，添加到head中生效
                    'style-loader',
                    //将css文件变成commonjs模块加载到js中，里面内容是样式字符串
                    'css-loader'
                ]
            },
            {
                test:/\.less$/,
                use:[
                    'style-loader',
                    'css-loader',
                    //将less文件编译成css文件
                    //需要下载less less-loader
                    'less-loader'
                ]
            }
        ]   
     }

注：不要忘记将less，css文件引入出口文件src/index.js中

import './index.css'
import './index.less'

打包html资源

/* 
loader :  下载  使用（配置loader）
plugins:   下载 引入 使用
*/
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
​
module.exports = {
    entry:'./src/index.js',
    output:{
        filename:"built.js",
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            //loader的配置
        ]
    },
    plugins:[
        //plugins的配置
        //html-webpack-plugin
        //功能：默认会创建一个空的html,自动引入打包输出所有的资源(js/css)
        //需求：需要有结构的html文件
        new HtmlWebpackPlugin({
            //复制此路径下的html文件，并自动打包输出所有资源
            template:'./src/index.html'
        })
    ],
    mode:'development'
}

注：一定要在本地磁盘下载包html-webpack-plugin

npm i html-webpack-plugin -D