webpack學(xué)習(xí)簡單總結(jié)-創(chuàng)新互聯(lián)

webpack使用總結(jié)：

入門使用：

創(chuàng)新互聯(lián)建站擁有一支富有激情的企業(yè)網(wǎng)站制作團隊，在互聯(lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)深耕10多年，專業(yè)且經(jīng)驗豐富。10多年網(wǎng)站優(yōu)化營銷經(jīng)驗，我們已為上千中小企業(yè)提供了成都網(wǎng)站設(shè)計、做網(wǎng)站解決方案，按需求定制開發(fā)，設(shè)計滿意，售后服務(wù)無憂。所有客戶皆提供一年免費網(wǎng)站維護!

這個報錯說明需要安裝相應(yīng)的Loader,并在引用時指定相應(yīng)的loader

執(zhí)行成功如圖：

chunk指相應(yīng)的區(qū)塊。

要是css引入正確：必須引入css-loader，要使改變的css生效，要引入style-loader;

各個js的函數(shù)調(diào)用只能在各自的函數(shù)中寫，引入只是合并的意思，但并不能直接使用引入的js的函數(shù)。

而且style-loader要寫在css-loader的前面，否則報如下錯誤。

執(zhí)行成功之后，css插入到了head標(biāo)簽里。

loader正確順序：”style-loader!css-loader!./style.css”

loader的加載順序是從右向左加載，所以

loader正確順序：：style-loader!css-loader!postcss-loader!less-loader

sass-loader或者less-loader等語言預(yù)編譯loader在webpack中的位置為：

1．最先放sass-loader或者less-loader

2．postcss-loader

3．css-loader

4．style-loader

注意：如果一個css中import導(dǎo)入另一個css,另一個css的postcss-loader沒生效，這時要給css-loader加一個參數(shù)，指定import導(dǎo)入css的數(shù)量：

loader:’style-loader!css-loader?importLoaders=1!postcss-loader’

為了使用簡便，不能每次在引入css的時候加loader，則可以在命令中實現(xiàn)：

webpack hello.js bundle.js --module-bind 'css=style-loader!css-loader'

去掉模塊引入css時加入的loader，1.x可以，3.0依舊會報錯。

--watch

在命令后面加 --watch ，可以不用每次改動都執(zhí)行命令，而是自動改變

注意：修改了webpack配置需要重啟，即即使設(shè)置了監(jiān)聽也要手動重新編譯;

關(guān)于版本安裝問題：把想要安裝的npm 模塊的名稱和版本號寫在package.json的依賴?yán)?，然后npm install就會自動安裝

但是，每次輸入很多命令依舊很繁瑣，解決辦法：

如果要提前配置好輸入的webpack命令，則在package.json中的script下，定義一個webpack屬性，后面定義所有要輸入的webpack的命令，定義好之后，在命令窗口 運行 命令 npm run webpack即可，定義方式與定義npm run dev中的dev是一樣的。

--progress  查看打包過程

--display-modules 查看打包的模塊

--colors  打包后的命令加顏色區(qū)分

--display-reasons 顯示打包原因

--watch 自動監(jiān)聽文件改變，若改動，自動打包，但是修改webpack配置需重新手動編譯。

webpack 配置文件

報錯：

output輸出的路徑寫成這樣：

而不是這樣：

webpack打包完成之后，顯示打包成功，但是并沒有生產(chǎn)打包的文件和文件夾，所以這里在path中切記首先要寫__dirname+“路徑”

如圖：

個人理解：如果寫成 __dirname+”/path”,則說明現(xiàn)在還沒有要放入的js的文件夾，這樣會自動創(chuàng)建，否則即使執(zhí)行成功，但是會看不到打包后的js文件，如果已經(jīng)提前創(chuàng)建好要打包的js的存放文件夾，則不需要寫__dirname. 【常見問題】

如果更改了入口文件的數(shù)量，比如變成數(shù)組形式，或者對象形式，則需要重新手動運行npm run webpack。

數(shù)組：用數(shù)組形式寫多個入口文件，則會合并成指定的一個打包之后的文件

對象：分別打包成多個文件

注意：一個chunk代表一個區(qū)塊，則不同的chunk會打包成不同的文件，如果output寫死成一個路徑，則打包之后第二個區(qū)塊會覆蓋第一個區(qū)塊，解決辦法，chunkname+hash作為占位，則有幾個區(qū)塊就打包成幾個區(qū)塊 filename: "[name]-[hash].js"

報錯原因：入口文件的路徑寫成了單引號套雙引號，所以不識別。

hash值可以理解為版本號，只有文件發(fā)生改變時，hash值才會變化。

hash值對靜態(tài)資源的版本管理很有用。

webpack插件

npm安裝該插件

npm install 插件名 --save-dev

一個很好用的webpack插件：html-webpack-plugin

安裝

npm install html-webpack-plugin --save-dev

使用：

首先在webpack.config.js中引入該插件，

var htmlWebpackPlugin = require('html-webpack-plugin');

然后只需要在webpack配置中modules增加屬性plugins，用來初始化插件。

寫法如下：

plugins: [
new htmlWebpackPlugin() 
]

如果要把自己的html頁面打包到對應(yīng)的打包文件夾下：則給該插件映射一個模版：

plugins: [
new htmlWebpackPlugin({
template:”index.html”
})
]

如果html頁面想要輸出到打包文件夾最外層目錄，然后js等文件要輸出到j(luò)s對應(yīng)的文件夾下，則output輸出的時候把js路徑單獨配置到對應(yīng)的目錄下的filename就可以。

代碼如圖：

output: {
        filename: "js/[name]-[hash].js",
        path: __dirname+"/dist"
},

輸出的文件結(jié)構(gòu)如圖：

插件的屬性：

plugins: [
        new htmlWebpackPlugin({
            filename:"index-[hash].html",
            template:'index.html',
            inject:"head",
            title:"我是title",
            date:new Date(),
        })
]

通過在plugins中定義的屬性和值，可以在頁面中用<%=  %>模版引擎的方式展現(xiàn)出來。

eg:<%= htmlWebpackPlugin.options.title %>

并且可以取到值之后進行for循環(huán)

<% for (var key in htmlWebpackPlugin.files){ %>
<%= key %> : <%= JSON.stringify(htmlWebpackPlugin.files[key]) %>
<% } %>

通過遍歷files和options可以看到插件對應(yīng)的都有哪些屬性，這樣頁面中如果有多個js,一些想放到頭部，一些像放到body中，就可以直接在頁面中以模板引擎的方式引入js了。

eg: <script type=”text/javascript src=”<%= htmlWebPackPlugin.files.chunks.main.entry %>”>

[此時inject要記得設(shè)為false]

minify：壓縮 【具體可參照官網(wǎng) www.npmjs.com  中的htmp-webpack-plugin】

多頁面配置：chunk:[]

plugin是一個數(shù)組，如果要打包成多個頁面，只需寫多個創(chuàng)建插件對象的實例，給每個實例里寫chunk屬性，該屬性是一個數(shù)組，每個數(shù)組里對應(yīng)的js的名稱。

excludeChunks:[]    除一些以外

處理模板文件的loader

安裝loader方法:

npm  install  xxx-loader  --save-dev

首先安裝html-loader:

npm  install  html-loader  --save-dev

在webopack.config.js中配置該loader

1. 首先寫好自己的html代碼，

<div >
    <h2>模板文件處理 測試</h2>
</div>
2. 然后再對應(yīng)的js中import導(dǎo)入該html文件，
import tpl from '../layer.html';
function layer() {
    return {
        name:'layer',
        tpl:tpl
    };
}

export default layer;

3. 然后去App.js中導(dǎo)入該js文件，

4. 最后在App.js中渲染到index.html中

import Layer from './layer.js';
const App = function () {
    var dom = document.getElementById('app');
    var Layer = new Layer();
    dom.innerHTML = Layer.tpl;
};
new App();

有關(guān)html-loader的具體代碼，參見官網(wǎng)templating……

對于復(fù)雜的模板引擎，安裝ejs-loader

后綴格式可以是.tpl/.ejs

當(dāng)引入tpl的模板文件的時候，返回的不是一個字符串，是一個function

webpack配置：

{
    test:/\.ejs$/,
    loader:'ejs-loader'
 },

app.js

import Layer from './src/js/layer.js';
const App = function () {
    var dom = document.getElementById('app');
    var layer = new Layer();
    dom.innerHTML = layer.tpl({
        name:'John',
        arr:["1111","2222","3333"]
    });
};
new App();

layer.tpl

<div>
    <div>this is <%= name %> layer</div>
    <% for (var i = 0;i < arr.length; i++) { %>
        <%= arr[i] %>
    <% } %>
</div>

[webpack 3.0 報錯]bundle.js:84 Uncaught TypeError: Cannot set property 'innerHTML' of null

處理圖片及其他文件的loader

file-loader

安裝loader

npm install file-loader --save-dev

webpack配置

{
     test:/\.(png|jpg|gif|svg)$/,
     loader:'file-loader'
 },

無論是在根目錄下的Index.html中直接引用（絕對路徑?jīng)]有問題，相對問題可以被解析），還是css中背景圖片引用，亦或者是在模版文件中引用，在file-loader的作用下，都成功被解析。在模版引擎文件中，src可以以require(“相對路徑”) 的形式 引入，就可以成功引入，但是直接引用相對地址就不可以解析。

url-loader:

當(dāng)圖片小于指定大小的時候，使用url-loader，當(dāng)大于指定大小的時候，自動轉(zhuǎn)換為file-loader

{
   test:/\.(png|jpg|gif|svg)$/,
   loader:'url-loader',
   query:{
         limit:20000, //指定大小 ，單位kb
   name:"src/[name]-[hash:5].[ext]"
  }
 },

p_w_picpath-webpack  loader

圖片壓縮loader

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享題目：webpack學(xué)習(xí)簡單總結(jié)-創(chuàng)新互聯(lián)
瀏覽路徑：http://bm7419.com/article22/igscc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、做網(wǎng)站、網(wǎng)站營銷、品牌網(wǎng)站制作、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)