webpack是干什么的網(wǎng)上一堆，就不贅述了?，F(xiàn)在從零開始學(xué)習(xí)webpack;
- 初始化項(xiàng)目
git init // git 初始化
npm init // 創(chuàng)建package.json.
- 安裝webpack webpack-cli
cnpm i webpack webpack-cli --save-dev
- 現(xiàn)在就可以使用webpack了，我們先來創(chuàng)建一個(gè)src目錄，在下面創(chuàng)建一個(gè)index.js；index.js內(nèi)容console一段話
console.log('哈哈哈')
-
命令行運(yùn)行webpack
image.png
- 然后就會發(fā)現(xiàn)在生成了一個(gè)dist目錄，下面有webpack打包生成的main.js.
-
我們在根目錄下創(chuàng)建一個(gè)html文件，并引入main.js。打開網(wǎng)頁，打開控制臺，可以看到輸出了"哈哈哈";
image.png
image.png -
我們試一下能不能require其他js。在src下創(chuàng)建一個(gè)a.js。里面
console.log('我是 a.js'); 在index.js中 require('./a.js');
image.png
-
重新命令webpack打包文件，然后打開index.html
image.png - 可以看到控制臺輸出了a.js中的內(nèi)容。證明把多個(gè)js打包了。
-
當(dāng)然如果我們不想用默認(rèn)打包方式可以創(chuàng)建webpack.config.js；在里面配置我們的個(gè)性化打包方式。
image.png webpack.config.js中的一些簡單的配置；
const path = require('path');
module.exports = {
mode: 'production', //開發(fā)模式 development 生產(chǎn)模式production
entry: './src/index.js', // 入口
output:{
filename: "index.[hash:8].js", // 打包后的文件名，帶上8位數(shù)的hash值
path: path.resolve(__dirname, 'build') // 打包后的絕對路徑 path自帶模塊相對路徑轉(zhuǎn)換絕對路徑
}
}
-
配置好webpack.config.js后，需要在package.json.中scripts中配置
啟動命令
image.png -
然后我們在命令行輸入
npm run build
可以看到在根目錄打包了build文件夾，下面有一個(gè)index.18abb081.js的文件，在html中引入這個(gè)新的js。
image.png 打開網(wǎng)頁，控制臺一樣輸出了 ‘哈哈哈’ ‘我是 a.js’，說明配置沒有問題。
- 當(dāng)然我們也可以重命名webpack.config.js。比如我們加webpack.config.test.js
-
把webpack.config.js中的內(nèi)容復(fù)制過來，輸出文件夾改個(gè)名字試一下
image.png -
package.json 中的build內(nèi)容修改為 webpack --config webpack.config.test.js
image.png 可以看到打包成功，并且生成了預(yù)期的buildtest的文件夾，引入當(dāng)前js到index.html中，控制臺也正常打印了結(jié)果。
- 好了把webpack.config.test.js文件刪除，package.json也回去?，F(xiàn)在打包后的文件我是用vscode插件啟動的index.html。當(dāng)然webpack肯定有自己啟動服務(wù)的插件。
webpack-dev-server
- 命令行安裝
webpack-dev-server
-
package.json中配置啟動命令。
image.png
{
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"serve": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.31.0",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.3.1"
}
}
-
現(xiàn)在我們在命令行運(yùn)行
npm run serve，打開頁面localhost:8080;控制臺依然打印成功了。
image.png 當(dāng)然我們可以配置 webpack.config.js中devServer
const path = require('path');
module.exports = {
mode: 'production', //開發(fā)模式 development 生產(chǎn)模式production
entry: './src/index.js', // 入口
output:{
filename: "index.[hash:8].js", // 打包后的文件名，帶上8位數(shù)的hash值
path: path.resolve(__dirname, 'build') // 打包后的絕對路徑 path自帶模塊相對路徑轉(zhuǎn)換絕對路徑
},
devServer:{
port: 1234, // 端口號 不能6666-6669 ,安全限制在chrome中不能成功
progress: true, // 加上進(jìn)度條
contentBase: './', //靜態(tài)服務(wù)的目錄。默認(rèn)當(dāng)前根目錄，如果index.html在src下，這里就要改為./src
open: true, //自動打開頁面
compress: true, //壓縮
}
}
- 這時(shí)會自動打開頁面。控制臺也打印成功
