一、Webpack
Webpack 是一個前端資源加載/打包工具。它將根據模塊的依賴關係進行靜態分析，然後將這些模塊按照指定的規則生成對應的靜態資源。
二、Webpack安裝
1、全局安裝
npm install -g webpack webpack-cli
2、安裝後查看版本號
webpack -v
三、初始化項目
1、創建webpack文件夾
進入webpack目錄，執行命令
npm init -y
2、創建src文件夾
3、src下創建common.js
exports.info = function(str) {
document.write(str); //瀏覽器輸出
}
4、src下創建utils.js
exports.add =function(a, b) {
return a*b;
}
5、src下創建main.js
const common = require('./common.js')
const util = require('./utils.js')
//css文件引入
require('./style.css')
common.info('hello common '+util.add(1,2))
四、JS打包
1、webpack目錄下創建配置文件webpack.config.js
以下配置的意思是：讀取當前項目目錄下src文件夾中的main.js（入口文件）內容，分析資源依賴，把相關的js文件打包，打包後的文件放入當前目錄的dist文件夾下，打包後的js文件名爲bundle.js
const path = require("path"); //Node.js內置模塊
module.exports = {
entry: './src/main.js', //配置入口文件
output: {
path: path.resolve(__dirname, './dist'), //輸出路徑，__dirname：當前文件所在路徑
filename: 'bundle.js' //輸出文件
}
}
2、命令行執行編譯命令
webpack #有黃色警告
webpack --mode=development #沒有警告
執行後查看bundle.js 裏面包含了上面兩個js文件的內容並驚醒了代碼壓縮
也可以配置項目的npm運行命令，修改package.json文件
"scripts": {
//...,
"dev": "webpack --mode=development"
}
運行npm命令執行打包
npm run dev
3、webpack目錄下創建index.html
引用bundle.js
<body>
<script src="dist/bundle.js"></script>
</body>
4、瀏覽器中查看index.html
五、CSS打包
1、安裝style-loader和 css-loader
Webpack 本身只能處理 JavaScript 模塊，如果要處理其他類型的文件，就需要使用 loader 進行轉換。
Loader 可以理解爲是模塊和資源的轉換器。
首先我們需要安裝相關Loader插件，css-loader 是將 css 裝載到 javascript；style-loader 是讓 javascript 認識css
npm install --save-dev style-loader css-loader
2、修改webpack.config.js
const path = require("path"); //Node.js內置模塊
module.exports = {
//...,
output:{},
module: {
rules: [
{
test: /\.css$/, //打包規則應用到以css結尾的文件上
use: ['style-loader', 'css-loader']
}
]
}
}
3、在src文件夾創建style.css
body {
background-color: green;
}
4、修改main.js
在第一行引入style.css
require('./style.css');