1.什么是webpack
webpack是一個前端資源加載/打包工具。它根據模塊的依賴關系進行靜態分析，然后將這些模塊按照指定的規則生成對應的靜態資源。
從上圖看出，webpack可以將多種靜態資源js，css，less轉換成一個靜態文件，減少頁面的請求。
2.webpack安裝
全局安裝：
npm install webpack -g
npm install webpack-cli -g
查看版本號：
webpack -v
3.快速入門
3.1 js打包
1.創建src文件，src里創建bar.js
//bar
exports.info = function(str){
document.write(str);
}
2.src里創建logic.js
//logic
exports.add = function(a,b){
return a+b;
}
3.src里創建main.js
//main.js
var bar = require("./bar");
var logic = require("./logic");
require('./css1.css');
bar.info("hello world! "+logic.add(100,200));
4.創建配置文件webpack.config.js，與src處于同級目錄
const path = require('path');
module.exports = {
// 讀取src文件夾中的main.js(入口文件)
entry: './src/main.js',
output: {
// path.resolve解析當前相對路徑的絕對路徑 path.join
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
};
含義：讀取當前目錄下src文件夾中的main.js(入口文件)內容，把對應的js文件打包，打包后的文件放入當前目錄的dist文件夾下，打包后的js文件名為bundle.js。
5.執行編譯命令
webpack
編譯后查看dist文件夾下的bundle.js文件，會發現該文件包含了上面兩個js文件的內容
6.創建index.html頁面，引用bundle.js
打開index.html頁面，查看頁面效果
3.2 css打包
1.安裝style-loader和css-loader
webpack本身只能處理JavaScript模塊，若要處理其他類型的文件，需要使用loader進行轉換。
Loader 可以理解為是模塊和資源的轉換器，它本身是一個函數，接受源文件作為參數，返回轉換的結果。這樣，我們就可以通過?require?來加載任何類型的模塊或文件，比如CoffeeScript、 JSX、 LESS 或圖片。首先我們需要安裝相關Loader插件，css-loader 是將 css 裝載到 javascript；style-loader 是讓 javascript 認識css
cnpm?install?style‐loader?css‐loader?‐‐save‐dev
2.修改webpack.config.js，添加module
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
// path.resolve解析當前相對路徑的絕對路徑 path.join
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
// webpack讀取loader時,是從右到左
// loader執行順序是從右到左以管道方式鏈式調用
// css-loader是將css裝載到javascript,style-loader是讓javascript認識css
{ test: /\.css$/, use: ['style-loader','css-loader'] }
]
}
};
3.src里創建css文件夾，css下創建css1.css
body{
background: red;
}
4.修改main.js，引入css1.css
require('./css1.css');
5.重新運行webpack
6.運行index.html，查看頁面背景色
)