webpack创建的操作步骤

webpack.config.js webpack的配置文件
// 作用:指示webpack 干那些活（当运行 webpack 指令时，会加载里面的配置）
// 所有构建工具都是基于node.js平台运行的模块化默认采用commomjs

const {resolve} = require(‘path’);

module.exports={
// webpack配置
// 入口起点
entry:’./src/index.js’,
// 输出
output:{
// 输出文件名
filename:‘built.js’,
// 输出路径
// __dirname node.js的变量，代表当前文件的目录绝对路径
path:resolve(__dirname,‘build’)
},
// 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-loader'
            ]
        }
    ]
},
// plugins的配置
plugins:[
    // 详细plugins的配置
],
// 模式
mode:'development'//开发模式
// mode:'production'//生茶模式

}

以loader的打包的步骤和命令
//初始化package.json
1.npm init

2.Webpack_code
//下载并安装webpack
3.npm i webpack webpack-cli -D
只需要不同文件必须配置不同loader处理，使用前要记得安装，
4.npm install --save-dev html-webpack-plugin
最后运行 webpack或者npm run build
5.webpack