webpack怎麼打包js、css文件

1、安裝webpack

npm install webpack -g

注意：npm太慢的話切到國內鏡像（淘寶有的自行百度）

2、打包示例：

兩個js文件（index.js、hello.js）、

一個css文件(style.css)、

一個html文件(index.html)、

一個配置文件（webpack.config.js：配置文件名稱必須爲這個，打包的時候webpack會自動找到這個文件，然後根據裏面設置的配置信息去打包）

要完成的是對js和css文件打包然後生成一個js，引入到index.html中，如圖：

 

四個文件如上圖;注意webpack.config.js中設置的參數，我這裏只是打包js和css文件，如果你想要打包其他的去參考一下webpack官網，

3、在當前目錄執行webpack ，在執行過程中如果第一次他可能讓你安裝webpack-cli 直接yes 就行；打包命令如圖

注意：

//   npm install --save-dev css-loader
//   npm install --save-dev style-loader
//   npm install --save-dev ts-loader 

上面的這三個東西不要忘記在當前目錄安裝，否則會提示模塊不存在；

4、在index.html引入my-first-webpack.bundle.js文件,如圖：

他會自動生成dist文件夾並且在該文件夾下面生成 my-first-webpack.bundle.js文件，瀏覽器打開看一下是否引入成功

我們在hello、index寫的js和style寫的css全部都實現，最後看一下我們生成的打包後的文件：如圖

 

有問題+qq：997136555