webpack基礎(chǔ)
在去閱讀webpack官網(wǎng)文檔過(guò)程中善已，loader部分開頭就介紹到webpack自帶處理js灼捂，json的功能，所以想處理其他類型的文件如 css, less, sass, png, gif, jpg等需要讓loader將其轉(zhuǎn)換為有效模塊换团，以供應(yīng)用程序去使用悉稠，我們可以驗(yàn)證一下webpack能否打包js，json艘包，css文件
驗(yàn)證webpack 打包js代碼
1. 初始化package.json
npm init
回車默認(rèn)package.json的配置
2. 全局安裝webpack webpack-cli
yarn add webpack webpack-cli global
3. 同時(shí)在本地項(xiàng)目中安裝
yarn add webpack webpack-cli -D
4. 新建代碼部分的目錄
mkdir src && touch ./src/indexjs
index.js為本次webpack打包js代碼的入口文件
可以輸入一些js代碼內(nèi)容如下：
function printNum() {
console.log(1);
}
pintNum();
5. 新建輸入部分的目錄
mkdir dist
通過(guò)webpack 打包以后輸出的文件放在dist目錄文件下
6. 進(jìn)行webpack打包測(cè)試
在該項(xiàng)目的根目錄下運(yùn)行, src中的index.js為入口文件進(jìn)行打包的猛，打包的輸出文件在dist文件夾下為main.js，打包環(huán)境為
npx webpack ./src/index.js -o ./dist --mode=development
或者在package.json中配置命令行
{
"scripts": {
"build:dev": "webpack ./src/index.js -o ./dist --mode=development"
},
}
保存后再運(yùn)行
yarn build:dev
或
npm build:dev
可以看到想虎，在src/index.js中的方法代碼是可以被打包的卦尊。
驗(yàn)證webpack打包json代碼
在src下新建json文件
touch data.json
內(nèi)容為：
{
"name": "利魯姆"
}
在index.js中引用
import data from './data.json';
console.log(data);
可以換個(gè)方式去打包代碼，在根目錄下新建一個(gè)文件webpack.config.js
touch webpack.config.js
內(nèi)容為
const { join } = require('path');
module.exports = {
entry: './src/index.js', // 入口文件
output: {
filename: 'index.js', // 輸出文件名
path: join(__dirname, 'dist'), // 輸出文件的路徑
},
mode: "development", // 當(dāng)前打包環(huán)境為development
執(zhí)行命令
npm webpack --config webpack.config.js
或?qū)ackage.json中的命令行配置修改一下：
{
"scripts": {
"build:dev": "webpack --config webpack.config.js"
},
}
可以看到能夠打包成功
驗(yàn)證能否打包c(diǎn)ss代碼
在src下新建css文件
touch index.css
內(nèi)容為：
html, body {
background-color: '#abcdef'
}
在index.js中引入這個(gè)css文件
import './index.css';
執(zhí)行打包命令
npm run build:dev
可以看到webpack打包失敗舌厨，并提示我們需要下來(lái)loader去處理岂却， 可以去看loader部分的筆記，如何使用loader處理除js裙椭，json以外其他的文件躏哩。
如何打包 css 和 less 文件請(qǐng)參考 webpack學(xué)習(xí)筆記【二】：打包樣式資源
