webpack
在學習webpack之前你的計算機上得有
1.node.js
前往node.js官網下載
https://nodejs.org/zh-cn/ //node.js官網
2.安裝全域webpack
前往webpack官網也可以下載,版本不合的話
https://webpack.docschina.org/ //webpack官網
npm install --save-dev webpack
webpack打包
1.將所在檔案初始化
npm init //命令列執行
執行完命令后所在檔案夾就會生成一個檔案
package.js中放的是你之后使用webpack時所需插件的版本號
2.這時在當前檔案下再次安裝本檔案下的webpack
npm i webpack webpack-cli -D 安裝到,當前檔案下
添加一個入口檔案index.js
index.js: webpack 入口起點檔案
3.運行指令
開發環境
webpack ./src/index.js -o ./build/main.js --mode=development
webpack會以 ./src/index.js 為入口檔案.打包后輸出到 ./build/main.js 整體打包環境為開發環境
開發環境下就是這樣
4.生產環境
webpack ./src/index.js -o ./build/main.js --mode=production
生產環境下是這樣的,生產環境比開發環境多了一個壓縮js代碼
webpack 能處理js/json檔案,但不能直接處理css/img等其他資源
生產環境和開發環境將es6模塊化編譯成瀏覽器能識別的模塊化
生產環境比開發環境多一個壓縮js代碼
webpack打包css,less檔案
打包css與less是webpack需要自己組態檔
webpack.config.js
webpack.config.js webpack的組態檔
作用 : 指示 webpack 干那些活(當你運行webpack 指令時,會加載里面的配置)
所有構件工具都是基于node.js平臺運行的~模塊化默認采用commitjs
向package.json中安裝打包css與less的插件
npm i css-loader style-loader -D //css
npm i less-loader -D //less
npm i less -D //less
const {resolve} = require('path')
module.exports = {
// mode: 'production',
// webpcak配置
// 入口起點
entry:'./src/index.js',
//輸出
output:{
filename:'built.js',
//輸出路徑
//_dirname node.js的變數,代表當前檔案的目錄絕對路徑
path:resolve(__dirname,'build')
},
module:{
rules:[
// 詳細的loader配置
{
//匹配那些檔案
test:/\.css$/,
//使用那些loader進行處理
use:[
//use陣列中loader執行順序: 從左到右,從上到下,依次執行
//創建style標簽,將js中的樣式資源插入進行,添加到head(頁面)中生效
'style-loader',
//將css檔案變成commonjs模塊加載js中,里面內容是樣式字串
'css-loader'
]
},
{
test:/\.less$/,
use:[
'style-loader',
'css-loader',
//將less檔案編譯成為css檔案
//less需要下載兩個包less和less-loader
'less-loader'
]
}
]
},
plugins:[
// 詳細
],
//開發模式
mode:'development'//生產模式
}
webpcak打包html檔案
下載打包html檔案所需要的的插件
在package.json就會出現這個
npm i html-webpack-plugin -D
// loader 1.下載 2.使用(配置loader)
// plugins: 1.下載 2.引入 3.使用
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry:'./src/index.js',
output:{
filename:'built.js',
path:resolve(__dirname,'build')
},
module:{
rules:[
//loader的配置
]
},
plugins:[
// plugins的配置
//html-webpack-plugin
//功能:默認會創建一個空的HTML,自動引入打包輸出的所有資源(js/css)
new HtmlWebpackPlugin({
//復制'./src/index.html'檔案,并自動引入打包輸出的所有資源(js/css)
template:'./src/index.html'
})
],
mode:'development'
}
總:
webpack 能處理js/json檔案,但不能直接處理css/img等其他資源
生產環境和開發環境將es6模塊化編譯成瀏覽器能識別的模塊化
生產環境比開發環境多一個壓縮js代碼
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/286586.html
標籤：其他