目錄

webpack和node和npm的關系

npm install webpack -g -g是全局的意思

項目中一般有兩個文件夾：
src，dist（distribution）

WebPack的使用

總結：使用WebPack之后，開發模式是，在src目錄下進行模塊化開發，開發之后使用WebPack打包成瀏覽器可以解析的bundle.js文件，直接在html中引用該js文件。
WebPack可以幫我們處理模塊之間的依賴，并打包。

當前WebPack版本：4.41.5

使用 WebStorm 建立空項目， 編寫main.js和mathUtils.js

main.js

// WebPack支持各種模塊化規范，例如： // 使用CommonJS的模塊化規范 const {add,mul}=require('./mathUtils.js')console.log(add(20,30)); console.log(add(20,40));// 使用ES6的模塊化規范 import {name,age,height} from "./info";console.log(name); console.log(age); console.log(height);

mathUtils.js

function add(num1, num2) {return num1 + num2; }function mul(num1, num2) {return num1 * num2; }module.exports={add,mul }

使用 WebPack 打包：命令 webpack ./src/main.js -o ./dist/bundle.js
WebPack 可以幫助我們處理各種模塊之間的依賴，只要告訴 WebPack 入口是 main.js，它會自動分析依賴；

打包成功后，生成 bundle.js， 整體目錄結構：

使用生成的bundle.js文件：

點擊運行

運行結果

筆記整理

使用npm init初始化一個package.json

使用配置文件

package.json

{"name": "01-webpack_use","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack"},"author": "","license": "ISC" }

打包命令webpack
或者npm run build
WebPack分為全局的WebPack和本地項目目錄本地的WebPack，
在WebStorm自帶的終端，npm install webpack@3.6.0，安裝本地WebPack，指定版本。

在使用時，只要是在終端輸入webpack，使用的都是全局的webpack，而在json配置文件定義的webpack腳本會優先在本地中找。

開發時依賴/運行時依賴

如何把css文件也模塊化？

根據：webpack 官網示例
安裝下列loader：
npm install --save-dev css-loader
npm install style-loader --save-dev

打包命令：npm run build

less-loader 官方示例

使用less文件預處理css
npm install --save-dev less-loader less

添加圖片

url-loader 使用示例 - vue 官方文檔

配置：webpack.config.js

const path = require('path')module.exports = {entry: './src/main.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js'},module: {rules: [{test: /\.css$/, // 正則匹配css文件// css-loader只負責將css文件進行加載// style-loader負責將樣式添加到DOM中// 使用多個loader時，是從右向左讀，下面兩個順序不能換。use: ['style-loader', 'css-loader']},{test: /\.less$/,use: [{loader: "style-loader"}, {loader: "css-loader"}, {loader: "less-loader"}]},{test: /\.(png|jpg|gif)$/i,use: [{loader: 'url-loader',options: {limit: 10*1024}}]}]} }

當加載的圖片小于limit（開發中一般配置為8kb）時，會將圖片編譯成base64
大于limit時，需要使用file-loader npm install file-loader --save-dev，并修改如下配置：

打包后，刷新頁面，顯示效果：

看背景圖片的顯示方式，為base64：

下一篇博客：WebPack配置Vue

總結

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

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