webpack使用攻略 基本

1、安装（需有npm环境）

1.1初始化 【npm init -y】

1.2下载webpack 【npm i webpack webpack-cli -g】

1.3本地安装【npm i webpack webpack-cli -D】

创建src项目文件夹 创建build编译输出文件夹

如果打包指令没有权限执行 运行powershell 执行【Set-ExecutionPolicy RemoteSigned】修改权限

2.创建webpack.config.js配置文件代码如下

const path = require("path")

const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports={

    //入口

    entry:"./src/index.js",

    //输出

    output:{

        //输出文件名

        filename:"build.js",

        //输出路径

        path:path.join(__dirname,'build')

    },

    //loader配置

    module:{

        //详细配置

        rules:[

            {//打包样式资源

                //匹配哪些资源

                test:/\.css$/,

                //使用哪些loader进行处理  use执行顺序是从右到左  从下到上

                use:[

                    //创建一个style标签  将js中的样式插入，添加到head中生效

                    'style-loader',

                    //将css文件打包成commomjs模块，内容是样式字符串

                    'css-loader'

                ]

            }

        ]

    },

    //插件

    plugins:[

        //打包html资源  下载html-webpack-plugin -D  插件需要引入

        //创建一个新的html页面并且自动引入已经打包的js资源

        new HtmlWebpackPlugin({

            template:'./src/index.html'

        })

    ],

    //模式

    //开发模式

    mode:'development',

    //生产模式

    // mode:'production'

   

}