一映凳、webpack的使用
1.入門
（1）建兩個(gè)文件夾分別為src和dist建一個(gè)文件為index.html,在src下建一個(gè)文件main.js其爵，在建一個(gè)文件夾js儒溉，里面建一個(gè)mathUtils.js毅该。
（2）在mathUtils.js里寫入簡單函數(shù)并導(dǎo)出青伤，在main.js中導(dǎo)入
mathUtils.js:
function add(num1, num2) {
return num1 + num2
}
function mul(num1, num2) {
return num1 * num2
}
module.exports = {
add,
mul
}
main.js:
//使用commonjs模塊化的規(guī)范
const {
add,
mul
} = require('./mathUtils.js')
console.log(add(20, 13));
console.log(mul(20, 30));
（3）用webpack命令打包
在項(xiàng)目的終端中輸入：
webpack ./src/main.js ./dist/bundle.js
//或者
webpack ./src/main.js -o ./dist/bundle.js
（4）在index.html中引用新增的文件bundle.js
<script src="./dist/bundle.js"></script>
2. 通過配置文件來使用webpack
（1）在終端中使用npm init命令自動(dòng)創(chuàng)建這個(gè)package.json文件
npm init
[圖片上傳失敗...(image-4b18b8-1607182518286)]
（2）在文件的根目錄下建一個(gè)webpack.config.js文件
const path = require('path')
module.exports = {
entry: './src/main.js', //入口文件
output: {
//絕對路徑
//_dirname是node.js中的全局變量梦谜，指向當(dāng)前執(zhí)行腳本所在的目錄
path: path.resolve(__dirname, 'dist'), //打包后文件存放的位置
filename: 'bundle.js', //打包后的文件名
},
}
我們可以通過webpack代替 webpack ./src/main.js -o ./dist/bundle.js 的命令進(jìn)行打包丘跌，這樣就方便很多
（3）我們還可以通過npm的命令對文件進(jìn)行打包，不過要在package.json文件進(jìn)行配置唁桩，在script對象中添加命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
然后我們就可以通過npm run build對文件進(jìn)行打包
3.配置Loader
Webpack 本身只能處理 JavaScript 模塊闭树，如果要處理其他類型的文件，就需要使用 loader 進(jìn)行轉(zhuǎn)換荒澡。loader可以加載css报辱、圖片，也包括一些高級的单山，將ES6轉(zhuǎn)成ES5代碼碍现，將TypeScript轉(zhuǎn)成ES5代碼，將scss米奸、less轉(zhuǎn)成css昼接，將.jsx、.vue文件轉(zhuǎn)成js文件等等悴晰。
（1）css文件
在src文件夾下再建一個(gè)css文件慢睡，在css文件夾下建一個(gè)normol.css文件
body {
background-color: black;
}
在main.js中導(dǎo)入
require('./css/normol.css')
用npm命令來安裝 css-loader 和 style-loader
npm install style-loader --save-dev
npm install css-loader --save-dev
在webpack.config.js中的module關(guān)鍵字下進(jìn)行配置
module.exports = {
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}]
}
}
用npm run build 進(jìn)行打包后逐工，打開瀏覽器運(yùn)行。
（2）less文件
在css文件夾下建一個(gè)special.less文件
@fontSize:50px;
@fontColor:red;
body{
font-size: @fontSize;
color: @fontColor;
}
在main.js中導(dǎo)入
require('./css/special.less')
document.writeln("<h2>你好啊hhhghfgkg</h2>")
用npm命令來安裝 less-loader 和 less
npm install --save-dev less-loader less
在webpack.config.js中的module關(guān)鍵字下進(jìn)行配置
module.exports = {
module: {
rules: [{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
}]
}
}
用npm run build 進(jìn)行打包后漂辐，打開瀏覽器運(yùn)行
（3）圖片
在src文件夾下再建一個(gè)img文件泪喊，在img文件夾下放兩張圖片，一張圖片較大（大于limit）髓涯，一張圖片較刑惶洹（小于limit），在normol.css中使用較小的圖片
normal.css
body{
background: url("../img/1.jpg");
}
用npm命令來安裝 url-loader
npm install --save-dev url-loader
在webpack.config.js中的modules關(guān)鍵字下進(jìn)行配置
module.exports = {
module: {
rules: [{
test: /\.(png|jpg|gif)$/,
use: [{
loader: 'url-loader',
options: {
limit: 130000,
},
}]
}]
}
}
用npm run build 進(jìn)行打包后纬纪，打開瀏覽器運(yùn)行瘤泪。當(dāng)加載的圖片小于limit時(shí)，會(huì)將圖片編譯成base64字符串形式
修改normol.css文件育八，將較大圖片替換成較小圖片的url对途；并且下載file-loader的模塊。
npm install --save-dev file-loader
在webpack.config.js中進(jìn)行配置
const path = require('path')
module.exports = {
entry: './src/main.js',
output: {
//絕對路徑
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: 'dist/'
},
module: {
rules: [{
test: /\.(png|jpg|gif)$/,
use: [{
loader: 'url-loader',
options: {
limit: 130000,
name: 'img/[name].[hash:8].[ext]' //圖片的命名及路徑
},
}]
}]
}
}
再次進(jìn)行打包發(fā)現(xiàn)髓棋，dist文件下多了一個(gè)img的文件夾实檀，里面有一張圖片，打開瀏覽器運(yùn)行按声。
（4）babel文件
用npm命令來安裝 babel-loader和 babel-core及babel-preset-env還有webpack
npm install babel-loader babel-core babel-preset-env webpack
npm i @babel/core --save-dev
npm i @babel/preset-env --save-dev
在webpack.config.js中的module關(guān)鍵字下進(jìn)行配置
module.exports = {
module: {
rules: [{
test: /\.js$/,
//exclude：排除 include：包含
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}, ]
}
}
用npm run build 進(jìn)行打包后膳犹，打開bundle.js文件發(fā)現(xiàn)代碼都是用es5寫的
(5)webpack使用Vue的配置過程
vue有兩個(gè)版本：
runtime-only : 代碼中不可以有template
runtime-compiler： 代碼中可以有template，因?yàn)橛衏ompiler可以編譯template
首先使用：
npm install vue --save //這里不要使用--save-dev因?yàn)樗粌H開發(fā)時(shí)會(huì)用签则，打包運(yùn)行也需要
然后引入：
打包前還需要配置resolve：
如果不進(jìn)行配置的話會(huì)使用runtime-only版本而無法成功運(yùn)行须床。
轉(zhuǎn)自：https://blog.csdn.net/Wu_JingYi0829/article/details/109894503
