webpack簡單運用(構建html 安裝外掛和loader)
目錄
webpack是什麼?
在webpack的世界裡,每個檔案都是一個模組,比如.css、.js、.html等。對於不同的模組,則需要不同的載入器(Loaders)來處理。
提示:下面的操作都預設你安裝了node.js,如果沒有請看 node.js安裝步驟
webpack配置步驟
1.建立一個目錄 比如 demo
使用 NPM初始化
$ npm init
2. 本地區域性安裝 webpack與webpack-dev-server
$ npm install webpack --save-dev
**: --save-dev 會作為開發依賴來安裝
$ npm install webpack-dev-server --save-dev
如果你的 package.json 的devDependencies包含 webpack和server則表示安裝成功。如果你的webpack版本大於4.0.0 則需要安裝webpack-cli 最後目錄如下:
"devDependencies": { "webpack": "^4.21.0", "webpack-cli": "^3.1.2", "webpack-dev-server": "^3.1.9" }
3.在 demo目錄裡 建立 webpack.config.js
4. 開啟 package.json 在"scripts" 加入一個服務指令碼
"dev":"webpack-dev-server --open --config webpack.config.js"
**: --open 表示會自動開啟瀏覽器 --config是 則會直接讀取webpack.config.js檔案
5. 在demo目錄下 建立 main.js,並開啟 webpack.config.js進行如下配置:
var path=require('path'); var config={ entry:{ main:'./main' }, output:{ path:path.join(__dirname,'./dist'), publicPath:'/dist/', filename:'main.js' } }; module.exports=config;
6. 在demo目錄下 建立 index.html
<div id="app">
你好! 世界
</div>
<script src="/dist/main.js"></script>
7.啟動webpack
$ npm run dev
安裝loader
1.安裝css處理的載入器
$ npm install css-loader style-loader --save-dev
2. 開啟webpack配置檔案,新增如下內容
module:{
rules:[
{
test:/\.css$/,
use:["style-loader","css-loader"]
}
]
}
**: module物件的 rules屬性可以指定一系列的Loaders。每一個loader都必須包含test和use兩個選項
3.在專案根目錄 建立 style.css檔案
#app{
font-size: 20px;
color:orange;
}
4.引入main.js
import './style.css';
5. 重新啟動服務
$ npm run dev
安裝外掛
有時候因為css檔案內容太多,都引入js檔案裡太佔體積,而且不能做快取,此時我們就需要用外掛來將散落的css提取到一個main.css檔案裡,最終將該檔案匯入index.html中
1. 安裝 extract-text-webpack.plugin
提示: 如果webpack版本大於4.0.0則需要@next
$ npm install [email protected] --save-dev
2. 開啟webpack配置檔案,配置如下:
var path=require('path');
var ExtractTextPlugin=require('extract-text-webpack-plugin');
var config={
entry:{
main:'./main'
},
output:{
path:path.join(__dirname,'./dist'),
publicPath:'/dist/',
filename:'main.js'
},
module:{
rules:[
{
test:/\.css$/,
use:ExtractTextPlugin.extract({
use:'css-loader',
fallback:'style-loader'
})
}
]
},
plugins:[
//重新命名提取後的css檔案
new ExtractTextPlugin('main.css')
]
};
module.exports=config;
3. 重新啟動服務
$ npm run dev
打包
1.在 package.json中“”scripts” 新增如下內容:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --config webpack.config.js",
"build": "webpack"
},
2. 打包
$ npm run build
如果想了解es6語法轉換點選這裡:es6語法轉es5
後面關於vue-cli的相關配置還會更新...