webpack超詳細配置
在這裡就不詳細介紹webpack來源以及作用了, 本篇博文面向新手主要說明如何配置webpack, 以及webpack的使用方法, 直到創建出一個合理的屬於自己webpack專案;
流程
webpack安裝
Step 1: 首先安裝Node.js, 可以去Node.js官網下載.
Step2: 在Git或者cmd中輸入下面這段程式碼, 通過全域性先將webpack指令安裝進電腦中
npm install webpack -g
- Step3: 使用Git Bash here 或者 cmd cd命令使當前目錄轉到當前專案的目錄下, 然後輸入下面這段命令
npm init
接下來會彈出一些資訊, 就是一些專案名和一些引數的描述, 可以全部按回車使用預設資訊, 完成之後專案資料夾下會生成一個package.json
這樣webpack就安裝完成了.
webpack配置
- Step1: 建立專案資料夾, 名字自起, 但路徑名不要包含中文, 以及專案名也不要叫”webpack”, 並且不要包含大寫字母.
例: - Step2: 接下來建立並編寫配置檔案. 首先我們先介紹幾個配置檔案的引數.
- entry: 是 頁面入口檔案配置 (html檔案引入唯一的js 檔案)
- output:對應輸出項配置
- path :入口檔案最終要輸出到哪裡,
- filename:輸出檔案的名稱
- publicPath:公共資源路徑
- Step3: 在你的專案目錄下建立webpack.config.js配置檔案, 通過這個檔案進行webpack的配置, 並且還要建立一些路徑儲存基本檔案. 例如:
src資料夾 Step4: 在src的js下建立一個入口檔案, 我建立的叫做entry.js, 在專案目錄再建立一個index.html用來除錯使用. 編寫webpack.config.js檔案,
//webpack.config.js module.exports = { entry : './src/js/entry.js',//入口檔案 output : {//輸出檔案 filename : 'index.js',//輸出檔名 path : __dirname + '/out'//輸出檔案路徑 }, }
我們隨便在index.html和入口檔案entry.js寫點什麼看看是否成功配置,
//index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>ss</title> </head> <body> 111 <script src="./out/index.js"></script>//注意在這裡引入的是打包完成的js檔案 </body> </html>
//entry.js console.log('1234');
之後使用Git Bash here 或者 cmd cd命令使目錄為當前專案目錄, 輸入webpack或者webpack -w命令, 檢視index.html是否成功console出1234;
webpack 和 webpack -w 區別
webpack -w可以對專案打包並且實時監控, 當前配置檔案下的檔案如果發生更改時重新打包, 但如果webpack的配置檔案即webpack.config.js更改時還是要通過webpack進行打包.(退出webpack -w 操作 ctrl+c)
webpack loader載入器
接下來我們繼續配置loader, 通過載入器處理檔案:比如 sass less 等, 告知 webpack 每一種檔案都需要使用什麼載入器來處理。
Step1: 為了方便我們先統一把所有的包都先下載下來, 下面再慢慢解釋.
npm install babel-loader babel babel-core css-loader style-loader url-loader file-loader less-loader less --save-dev
Step2: 下載完成後, 我們修改webpack.config.js檔案, 將載入器引入.
module.exports = { entry : './src/js/entry.js', output : { filename : 'index.js', path : __dirname + '/out' }, module : { rules: [ {test: /.js$/, use: ['babel-loader']}, {test: /.css$/, use: ['style-loader', 'css-loader']},/*解析css, 並把css新增到html的style標籤裡*/ //{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},/*解析css, 並把css變成檔案通過link標籤引入*/ {test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},/*解析圖片*/ {test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}/*解析less, 把less解析成瀏覽器可以識別的css語言*/ ] }, }
Step3: 接下來我們先測試css, 我們在專案資料夾下的src資料夾下建立index.css. 隨便寫一點屬性.
//index.css .demo1 { width: 100px; height: 100px; background: red; } .demo2 { width: 200px; height: 200px; background: orange; }
//index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>text</title> </head> <body> <div class="demo1"></div> <div class="demo2"></div> <script src="./out/index.js"></script> </body> </html>
因為在webpack中所有檔案都是模組, 所以必須要將css引入. 在剛剛的entry.js中新增如下程式碼.
//entry.js require('../css/index.css');//引入css檔案 console.log("1234");
打包webpack一下看看效果
Step4: 當有多個js檔案時, 如何進行引入呢? 接下來我們做一個簡單小功能來說明這個問題, 讓我們點選方塊的時候, 方塊變大.
接下來在src的js資料夾下建立一個基本的工具tool.js (很多小的問題都被我擴大化了, 只是為了說明問題不一定適用)
//tool.js var tool = {//獲取DOM元素 getDom: function(className) { return document.getElementsByClassName(className)[0]; } } module.exports = tool;//模組出口
src的js下建立一個demo1.js檔案, demo2.js同理
var obj = require('./tool.js'); var demo1 = { init: function() { this.bindEvent(); }, bindEvent: function() { //var demo1 = document.getElementsByClassName('demo1')[0]; var demo1 = obj.getDom('demo1'); demo1.onclick = this.changeStyle; }, changeStyle: function() { this.style.width = '200px'; this.style.height = '200px'; this.style.background = 'green'; console.log('1'); } } module.exports = demo1;
修改入口檔案entry.js
require('../css/index.css'); var demo1 = require('../js/demo1.js'); var demo2 = require('../js/demo2.js'); demo1.init(); demo2.init();
webpack一下, 看看效果
關於圖片的打包
- Step1: 在img資料夾下隨便找一個小一點的圖片放進去.
Step2: 修改entry.js
require('../css/index.css'); var demo1 = require('../js/demo1.js'); var demo2 = require('../js/demo2.js'); demo1.init(); demo2.init(); var oImg = new Image(); oImg.src = require('../img/1.gif');//當成模組引入圖片 document.body.appendChild(oImg);
由於我們引入的是靜態資源, 在webpack.config.js中修改一下
module.exports = { entry : './src/js/entry.js', output : { filename : 'index.js', publicPath: __dirname + '/out',//新增靜態資源, 否則會出現路徑錯誤 path : __dirname + '/out' }, module : { rules: [ {test: /.js$/, use: ['babel-loader']}, {test: /.css$/, use: ['style-loader', 'css-loader']},/*解析css, 並把css新增到html的style標籤裡*/ //{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},/*解析css, 並把css變成檔案通過link標籤引入*/ {test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},/*解析圖片*/ {test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}/*解析less, 把less解析成瀏覽器可以識別的css語言*/ ] }, }
大家自己webpack看看效果
webpack進階設定
我們在專案中有多個html檔案時怎麼處理呢?, 接下來我們重新設定配置檔案, webpack.config.js
module.exports = {
entry : {index1: './src/js/entry.js', index2: './src/js/entry2.js'},
output : {
filename : '[name].js',//這樣就可以生成兩個js檔案, 名字分別為index1.js, 和index2.js
publicPath: __dirname + '/out',//新增靜態資源, 否則會出現路徑錯誤
path : __dirname + '/out'
},
module : {
rules: [
{test: /.js$/, use: ['babel-loader']},
{test: /.css$/, use: ['style-loader', 'css-loader']},/*解析css, 並把css新增到html的style標籤裡*/
//{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},/*解析css, 並把css變成檔案通過link標籤引入*/
{test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},/*解析圖片*/
{test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}/*解析less, 把less解析成瀏覽器可以識別的css語言*/
]
},
}
webpack外掛使用
首先我們由於要使用webpack外掛, 因此我們要重新下載一下webpack包, 將目錄定位到當前專案目錄, 輸入npm install webpack
之後我們修改webpack.config.js, 將下面程式碼放到配置檔案開頭. 這樣就可以使用外掛了
var webpack = require('webpack');
將外掛資訊寫到配置檔案裡
var webpack = require('webpack');
var uglifyPlugin = new webpack.optimize.UglifyJsPlugin({minimize: true});//程式碼壓縮
var CommonsChunkPlugin = new webpack.optimize.CommonsChunkPlugin('common');//把公共模組提取出來, 並取名為'common'(名字自起), webpack之後再out資料夾下生成common.js, 測試時記得引入提取出來的公共模組js檔案
var ExtractTextPlugin = require("extract-text-webpack-plugin");//將css獨立引入變成link標籤形式, 使用該外掛需要獨立下載'npm install extract-text-webpack-plugin --save-dev', 同時下面的rules也必須更改
var providePlugin = new webpack.ProvidePlugin({$: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery'});//引入jquery
module.exports = {
entry : {index: './src/js/entry.js', index2: './src/js/entry2.js'},
output : {
filename : '[name].js',
publicPath: __dirname + '/out',
path : __dirname + '/out'
},
module : {
rules: [
{test: /.js$/, use: ['babel-loader']},
//{test: /.css$/, use: ['style-loader', 'css-loader']},
{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},
{test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},
{test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}
]
},
plugins: [uglifyPlugin, CommonsChunkPlugin, new ExtractTextPlugin('[name].css'),providePlugin]//外掛集合
}
webpack伺服器
首先先定位目錄輸入命令 npm install webpack-dev-server -g
, 修改webpack.config.js檔案
publicPath: 'http://localhost:8080/out',
- 1
html檔案所引用的目錄也要更改:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>text</title>
<link rel="stylesheet" href="http://localhost:8080/out/index.css">
</head>
<body>
<a href="http://localhost:8080/index2.html">11</a>
<div class="demo1"></div>
<div class="demo2"></div>
<script src="http://localhost:8080/out/common.js"></script>
<script src="http://localhost:8080/out/index.js"></script>
</body>
</html>
webpack-dev-server一下看看效果
小工具: webpace-dev-server –devtool eval-source-map –progess –colors打包時輸入這一行可以直接找到檔案如果出錯時的位置
小知識點: 上面這一句話如果覺得太長可以將
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"xuan": "webpack-dev-server --devtool eval-source-map --progress --colors"
},
這一段程式碼放到專案目錄下的package.json裡, 這樣除錯時如果輸入npm run xuan就等於輸入那一長串程式碼