目錄

webpack介紹

前端模塊化和打包概念介紹

webpack和grunt/gulp的對比

webpack和nodejs的關系

webpack安裝

webpack使用示例

環境搭建

使用webpack打包

使用打包后的js文件

入口和出口

局部安裝webpack

package.json中定義啟動

實踐

定義：

引用：

因為CommonJS規范的代碼瀏覽器是不認識的，所以需要借助webpack對上述代碼進行轉換：

查看結果：

代碼內容：

在index.html中引用：

瀏覽器訪問index.html：

兼容es6和CommonJS規范：

配置webpack.config.js：

配置完成之后只需執行webpack命令即可，不需要指定入口和出口參數。
package.json中配置npm run build與webpack進行綁定：

npm install webpack@3.6.0 --save-dev：

loader的使用

什么是loader

css文件打包

main.js中依賴css文件：

僅寫上面的會報錯，需要安裝對應的loader。
webpack中文官網（國內人進行的翻譯）：

安裝，配置，run：

css-loader只負責加載，不會渲染css樣式到HTML頁面，需要借助style-loader來實現：

總結

以上是生活随笔為你收集整理的webpack的安装及使用webpack打包js、css文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。