目錄

webpack介紹

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

webpack和grunt/gulp的對比

webpack和nodejs的關(guān)系

webpack安裝

webpack使用示例

環(huán)境搭建

使用webpack打包

使用打包后的js文件

入口和出口

局部安裝webpack

package.json中定義啟動

實踐

定義：

引用：

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

查看結(jié)果：

代碼內(nèi)容：

在index.html中引用：

瀏覽器訪問index.html：

兼容es6和CommonJS規(guī)范：

配置webpack.config.js：

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

npm install webpack@3.6.0 --save-dev：

loader的使用

什么是loader

css文件打包

main.js中依賴css文件：

僅寫上面的會報錯，需要安裝對應(yīng)的loader。
webpack中文官網(wǎng)（國內(nèi)人進行的翻譯）：

安裝，配置，run：

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。