[JavaScript知识库]webpack打包和css打包

①初始化工程 :npm init
②下载安装webpack : npm install -g webpack webpack-cli
安装 css 打包:npm install --save-dev style-loader css-loader
③ 查看版本 :webpack -v
④ 创建 webpack.config.js 文件在根路径下 配置如下：

const path =  require('path');  // Node.js 内置模块

module.exports ={
    entry :  "./src/main.js",  //配置入口文件  ./src/main.js 是你写的入口文件
    output:{
        path: path.resolve(__dirname,'./dist'),//输出路径，_dirname：当前文件所在路径
        filename: 'bundle.js' //输出文件 打包后的生成文件
    },
    module:{
		rules:[
            {
                test:/\.css$/,  //打包规则应用到以css结尾的文件上
                use:['style-loader','css-loader']
            }
        ]
	}
}

⑤ 使用命令打包：

webpack #黄色警告
或者
webpack --mode=development #开发环境 
webpack --mode=production  #生产环境

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖