webpack打包流程

1.

//npm产生项目
npm init

在npm init命令后在生成的package.json中添加

//安装webpack插件
npm i --save-dev -g webpack
//安装webpack-cli
npm i --save-dev -g webpack-cli

在根目录新建目录src，添加index.js，新建dist目录，添加main.js

 

2.打包css文件时

①安装相关loader

npm i css-loader style-loader --save-dev

②安装后还需要指定要经过那个loader的处理

     require('css-loader!./style.css')

3.打包成功后，对应的文件没有出来，webpack.config.js配置output路径问题

   原来的配置

   

  正确的配置

module.exports={
	entry:'./src/script/main.js',
	output:{
		path:require("path").resolve(__dirname,"dist/js"),
		filename:'bundle.js'
	}
}

 cmd:运行命令webpack --mode development

4.将每次要运行的命令添加在package.json的scripts中，在cmd输入npm run webpack运行

"webpack": "webpack --config webpack.config.js --display-module --progress --mode development",
"server": "webpack-dev-server"