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運行