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.jspublicPath: __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'});//引入jquerymodule.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就等于輸入那一長串代碼

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/247539.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/247539.shtml
英文地址，請注明出處：http://en.pswp.cn/news/247539.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

小白十分鐘-推薦導航欄

小白十分鐘-推薦導航欄

大腿繞道&#xff0c;給小白學習用&#xff0c;上代碼 <div class"list"><div class"infor"><ul class"left"><li><a href"">限時特價</a></li><li><a href"">熱門推…
閱讀更多...
Underscore.js常用方法介紹

Underscore.js常用方法介紹

Underscore.js是一個很精干的庫&#xff0c;壓縮后只有4KB。它提供了幾十種函數式編程的方法&#xff0c;彌補了標準庫的不足&#xff0c;大大方便了JavaScript的編程。MVC框架Backbone.js就將這個庫作為自己的工具庫。除了可以在瀏覽器環境使用&#xff0c;Underscore.js還可以…
閱讀更多...
掌握ES6/ES2015核心內容

掌握ES6/ES2015核心內容

ECMAScript 6&#xff08;以下簡稱ES6&#xff09;是JavaScript語言的下一代標準。因為當前版本的ES6是在2015年發布的&#xff0c;所以又稱ECMAScript 2015。 也就是說&#xff0c;ES6就是ES2015。 雖然目前并不是所有瀏覽器都能兼容ES6全部特性&#xff0c;但越來越多的程序員…
閱讀更多...
express-generator——Express應用生成器賊快！

express-generator——Express應用生成器賊快！

通過應用生成器工具 express 可以快速創建一個應用的骨架。 通過如下命令安裝&#xff1a; $ npm install express-generator -g-h 選項可以列出所有可用的命令行選項&#xff1a; $ express -hUsage: express [options] [dir]Options:-h, --help output usage inform…
閱讀更多...
轉：canvas--放大鏡效果

轉：canvas--放大鏡效果

<!DOCTYPE html><html><head><meta charset"UTF-8"><title>鼠標事件</title></head><body><canvas id"canvas"></canvas><canvas id"offCanvas" style" display: none;&qu…
閱讀更多...
MON

MON

早上5點,咪咪牛就醒了,開始跳到我邊上,用白毛毛把我弄醒,在我身上走來走去,把她按住撫摸也不能讓她停止.....只能拎起來扔到邊上了 ;)看起來還的確是很調皮的貓咪呢昨天晚上就開始不太怕我了,走到我的椅子邊上喵喵叫,直到把她放在身上,才慢慢睡覺,滿可愛的早上出門叫車,一車正停…
閱讀更多...
CSS做個Switch開關

CSS做個Switch開關

Switch開關&#xff1a;根據需求可知&#xff0c;Switch開關只有兩種選擇&#xff0c;true或false。所以我們想到HTML的checkbox控件&#xff0c;用它來做。　　<input id"switch" type"checkbox" class"switch" />但是在瀏覽器中&#xf…
閱讀更多...
vue小記錄1

vue小記錄1

1.入口index.html文件 做reset.css初始化&#xff0c;視口viewport設置 2.規范化eslint配置&#xff08;常用&#xff09; &#xff08;1&#xff09;rules -->"semi"分號 "semi":[error,alway], &#xff08;2&#xff09;indent 空格 "inde…
閱讀更多...
解決虛擬機能ping通宿主機，而宿主機不能ping通虛擬機

解決虛擬機能ping通宿主機，而宿主機不能ping通虛擬機

解決虛擬機能ping通宿主機&#xff0c;而宿主機不能ping通虛擬機 首先&#xff0c;查看宿主機的網卡狀態 如果沒有&#xff0c;打開虛擬機&#xff0c;選擇編輯 打開虛擬網絡編輯器&#xff0c;并選擇更改設置 勾選將設備適配器連接此網絡 完成&#xff0c;這樣宿主機便可以pin…
閱讀更多...
mongo使用學習FAQ

mongo使用學習FAQ

1:mongo的集合和database區分大小寫么? 在 MongoDB 中&#xff0c;數據庫和集合的名稱是區分大小寫的。這意味著&#xff0c;數據庫 MyDatabase 和 mydatabase 或集合 MyCollection 和 mycollection 會被視為不同的數據庫或集合。因此&#xff0c;在操作數據庫和集合時&#…
閱讀更多...
前端下載的實現

前端下載的實現

前端很多項目中&#xff0c;都有文件下載的需求&#xff0c;特別是JS生成文件內容&#xff0c;然后讓瀏覽器執行下載操作&#xff08;例如在線圖片編輯、在線代碼編輯、iPresst等&#xff09;。但受限于瀏覽器&#xff0c;很多情況下我們都只能給出個鏈接&#xff0c;讓用戶點擊…
閱讀更多...
V記錄2(文檔)Vue.extend構造器

V記錄2(文檔)Vue.extend構造器

1.簡單介紹 Vue.extend(options) 參數&#xff1a;對象 用法&#xff1a;使用Vue構造器&#xff0c;創建一個“子類”&#xff0c;參數是一個包含組件選項的對象&#xff0c;其中,data選項中必須是函數 描述&#xff1a;Vue.extend返回的是一個“擴展實例構造器”&#xff0c;也…
閱讀更多...
在javascript中，如何判斷一個被多次encode 的url 已經被decode到原來的格式？

在javascript中，如何判斷一個被多次encode 的url 已經被decode到原來的格式？

% 而不能被無限次decodeURIComponent 可以用%來進行判斷 轉載于:https://www.cnblogs.com/zhouyideboke/p/11169705.html
閱讀更多...
推薦base.css

推薦base.css

學習《編寫高質量代碼--Web前端開發修煉之道》 /* CSS Document */ /*css reset*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;} table{ border-collapse:collapse;border-spacing:0;} fieldest,i…
閱讀更多...
如何通過RFID開發來迎接第四次工業革命（轉）

如何通過RFID開發來迎接第四次工業革命（轉）

我們都經歷了革命性的沖擊&#xff0c;自上世紀90年代初的互聯網沖擊了文化和商業&#xff0c;但很少人知道如何完成RFID開發來迎接第四次工業革命&#xff0c;在接下來的二十年里&#xff0c;智能工廠的出現將成為一個重要組成部分。制造業作為我國工業的主體&#xff0c;面臨…
閱讀更多...
對js數組去重的研究

對js數組去重的研究

1.利用es5 let arr [1, 2, 3, 4, 5, 6, 7, 1, 2, 3] const uniquearr>{ return Array.from(new Set(arr)) } console.log(unique(arr))2.通過雙層循環使用splice刪除 let arr [1, 2, 3, 4, 5, 6, 7, 1, 2, 3] const uniquearr>{ // return Array.from(new Se…
閱讀更多...
一些前端開發經典書籍推薦和下載鏈接分享

一些前端開發經典書籍推薦和下載鏈接分享

下面的這些書都是我曾看過或了解過的&#xff1a; 一.HTML 1.《HTML5權威指南》 非常全面的書&#xff0c;內容也很新&#xff0c;包含了HTML5CSS3JS DOM。 下載鏈接&#xff1a;http://pan.baidu.com/s/1qYGn1qW HTML我暫時沒看什么書&#xff0c;學會了大部分的標簽后我…
閱讀更多...
RFID圖書管理系統程序源代碼(轉)

RFID圖書管理系統程序源代碼(轉)

RFID圖書管理系統程序源代碼https://wenku.baidu.com/view/5f4e47f0c9d376eeaeaad1f34693daef5ef713d9.html
閱讀更多...
UOJ310 黎明前的巧克力 FWT

UOJ310 黎明前的巧克力 FWT

傳送門 我們要求的是\([x^0]\prod\limits_{i1}^n (2x^{a_i}1)\)&#xff0c;其中乘積定義為集合對稱差卷積。 這個直接做復雜度太高了&#xff0c;考慮優化。注意到在FWT之后&#xff0c;每一個序列中的值要么是\(3\)&#xff0c;要么是\(-1\)&#xff0c;而且這個只跟\(a_i\)有…
閱讀更多...
vue調用百度地圖API

vue調用百度地圖API

安裝 $ npm install vue-baidu-map --save 全局注冊 在main.js 里面引入以下代碼 import BaiduMap from vue-baidu-mapVue.use(BaiduMap, {ak: 百度地圖密鑰AK }) 使用方法 <doc-preview><baidu-map class"map" style"display: flex; flex-direct…
閱讀更多...
最新文章

Copyright @ 2022~2023