摘要:是用來做瀏覽器兼容的,這個必須要配置,否則在打包的時候就會報錯,在這個中我們引用了之前安裝的,這個是用來自動匹配瀏覽器來補全前綴的,然后我們設置為最近五個瀏覽器版本。
上一篇文章講述了如何安裝和配置webpack的基礎依賴,可以看鏈接描述
這篇文章我們來看看如何配置webpack最重要的配置文件webpack.config.js
首先我們先在根目錄下新建一個webpack.config.js,然后開始配置
首先我們需要寫一個moudle.exports={},我們所有的配置項都需要在這里面配置,包括entry(文件入口),output(文件出口),module(里面配置一些loader)等等
具體代碼如下
module.exports = { entry:"./src/js/index.js",//入口文件 output:{ filename:"layer.js", //輸出的文件名 path : __dirname + "/dist" //輸出文件路徑 }, }
其中entry是我們要打包的js文件,output是我們打包之后的js文件,filename是打包后的文件名,path是我們的輸出路徑,其中__dirname 表示當前路徑。
好了,我們在src(和webpack.config.js以及package.json同級)目錄下創建一個js文件夾,然后在其中新建一個index.js,里面隨便寫上一點什么,在這里我是寫了一個alert,然后我們執行打包操作
在命令行中進入當前項目的路徑,然后輸入
webpack --mode development
在4.0版本之前我們可以使用webpack來執行打包,但是在4.0之后,webpack分成了開發環境和生產環境,webpack --mode development表示的開發環境下的打包, webpack --mode production表示是在實際項目上線時執行的打包。
那么我們打包之后的結果如下圖:
打包成功,然后我們發現在根目錄下出現了一個dist文件夾,并且里面出現了一個打包好的layer.js文件。
然后我們新建一個layer.html文件,引入打包好后的layer.js,發現能達到和index.js一樣的效果
代碼如下:
layer.html:
index.js
alert("webpack");
這表明我們可以正常打包了。
強大的webapck loader功能
光是js的打包并不能滿足我們的要求,我們在實際開發中也需要引用和打包一些其他的文件,比如less,sass,css,圖片等等,所以我們需要配置一些loader來完成這些文件的打包。
首先我們先來看看js的loader吧,現在很多js都是用es6來寫的,我們需要用webpack使他變成瀏覽器能識別的es5代碼。
首先我們需要在項目根目錄下安裝一個babel-loader,通過這個包將es6代碼轉換為es5代碼
npm install babel-loader --save-dev npm install babel --save-dev npm install babel-core --save-dev
然后我們在webpack.config.js新增一個module,然后在里面配置babel-loader,代碼如下:
module.exports = { entry:"./src/js/index.js",//入口文件 output:{ filename:"layer.js", //輸出的文件名 path : __dirname + "/dist" //輸出文件路徑 }, module:{ rules:[ { test:/.js$/, use:[ {loader:"babel-loader"} ] } ] }, }
在這之中我使用了webapck4的use來導入loader,當然也可以使用webpack4以下的loaders來導入loader,webpack4對于這兩種導入方式都支持。
然后我們打包一下就可以將es6的代碼轉換成瀏覽器可以識別的es5代碼了
接下來是比較重要的css-loader了,這個我們需要下的包就有些多了
下面是需要安裝的包,我們一次性安裝完好了
npm install css-loader style-loader postcss-loader autoprefixer --save-dev
然后我們在rules里面進行配置
代碼如下:
module.exports = { entry:"./src/js/index.js",//入口文件 output:{ filename:"layer.js", //輸出的文件名 path : __dirname + "/dist" //輸出文件路徑 }, module:{ rules:[ { test:/.js$/, use:[ {loader:"babel-loader"} ] }, { test: /.css$/, use: [ {loader:"style-loader"}, {loader:"css-loader", options: { importLoaders: 1 } }, {loader:"postcss-loader", options:{// 如果沒有options這個選項將會報錯 No PostCSS Config found plugins:(loader) => [ require("autoprefixer")( {broswers:["last 5 versions"]} ), //CSS瀏覽器兼容 ] } } ] }/*解析css, 并把css添加到html的style標簽里*/ ] }, }
其中css-loader是解析css文件的,style-loader是將css文件通過style的方式去引入,在css-loader中我們通過options給css-loader額外配置了一個importLoaders參數,這個參數表示在css-loader之后指定幾個數量的loader來處理import進來的資源,這里設定為1。
postcss是用來做css瀏覽器兼容的,這個loader必須要配置options,否則在打包的時候就會報錯No PostCSS Config found,在這個options中我們引用了之前安裝的autoprefixer,這個是用來自動匹配瀏覽器來補全前綴的,然后我們設置為最近五個瀏覽器版本。注意這些loader的排序方式不能改變,必須是style-loader在css-loader之前,css-loader在postcss-loader之前,這是因為webpack的數組是從后往前解析的。
然后我們在src文件夾下面建立一個css文件夾,在里面建立layer.css文件,寫一些樣式進去,然后在index.js文件中,通過commonjs的方式去引入這個css文件,具體代碼如下
layer.css
.test1{ width: 100px; height: 100px; background: blue; }
index.js
require("../css/layer.css"); const a = "webapck"; alert(a);
打包之后,運行效果如圖所示
表明我們的css文件也成功打包了
接下來是圖片的解析,我們也需要安裝一些loader,代碼如下:
npm install url-loader file-loader --save-dev
同樣的我們需要在rules中去配置這個loader,具體配置代碼如下:
{ test: /.(jpg|png|gif|svg)$/, use: [ { loader:"url-loader", options:{ limit: 500,//圖片小于500的話就把圖片轉為base64格式 outputPath: "assets/images/", name: "[hash].[ext]", } } ] }
在這個配置中我們可以識別以jpg,png,gif,svg為后綴名的圖片,并且將他們打包,在webpack4中,我們用了功能更為強大的url-loader去代替了file-loader(url-loader中內置了file-loader的功能),并且我們配置了一系列的options,下面就挨個來解釋這些配置項的用途。
limit是對于圖片大小的判斷,低于我們給定的數就會被轉換成base64的格式,單位是字節。
output則是圖片打包后的保存路徑,name是文件打包后的名字,在這里我用了[hash],這會使文件打包過后的名字是一串哈希值
配置完成之后我們來試驗一番吧。
首先我們先在src文件夾中創建一個img用來放置待打包的圖片,然后在css中去引用這些圖片,
然后運行看看是否正常打包
代碼如下
layer.css
.test1{ width: 100px; height: 100px; background: blue; } .test2{ width: 100px; height: 100px; background-image: url(../img/1.jpg); }
我們發現在dist目錄下生成了一個新的asset目錄,里面就是我們打包的圖片,而layer.html也能看到打包正常,但是圖片確沒有正常被引用,如下圖所示
似乎圖片的路徑出了點問題,這是因為圖片是靜態資源,加載靜態資源我們需要在output中配置一個名為publicPath的參數來正確的加載路徑
具體代碼如下
output:{ filename:"layer.js", //輸出的文件名 publicPath:"./dist/", path : __dirname + "/dist" //輸出文件路徑 }
在配置完publicPath之后,我們再次執行打包命令,然后看看layer.html,效果如圖
圖片的加載路徑正確了,背景圖也展現出來了。說明我們的配置是正確的
似乎忘了什么?現在樣式文件不光有css,還有less和sass,這兩個文件的打包也是需要loader的,所以我們來配置這兩個文件的打包吧
老規矩,先安裝loader
npm install less sass less-loader sass-loader --save-dev
配置可以和cssloader的配置一樣,不過我們需要注意一下需要修改一下識別的文件,分別是sass和less,具體配置如下
{ test: /.less$/, use: [ {loader:"style-loader"}, {loader:"css-loader", options: { importLoaders: 1 } }, {loader:"postcss-loader", options:{// 如果沒有options這個選項將會報錯 No PostCSS Config found plugins:(loader) => [ require("autoprefixer")( {broswers:["last 5 versions"]} ), //CSS瀏覽器兼容 ] } }, {loader:"less-loader"} ] },/*解析less, 把less解析成瀏覽器可以識別的css語言*/ { test: /.sass$/, use: [ {loader:"style-loader"}, {loader:"css-loader", options: { importLoaders: 1 } }, {loader:"postcss-loader", options:{// 如果沒有options這個選項將會報錯 No PostCSS Config found plugins:(loader) => [ require("autoprefixer")( {broswers:["last 5 versions"]} ), //CSS瀏覽器兼容 ] } }, {loader:"sass-loader"} ] }/*解析sass, 把sass解析成瀏覽器可以識別的css語言*/
配置完這個之后我們也可以打包less和sass文件了
有些時候我們需要在html文件中引入html文件,這種情況下我們就需要導入html-loader
npm install html-loader --save-dev
配置如下
{ test: /.html$/, use: [ {loader:"html-loader"} ] }
配置完了我們就可以打包html文件了
最終webpack.config.js的代碼如下
module.exports = { entry:"./src/js/index.js",//入口文件 output:{ filename:"layer.js", //輸出的文件名 publicPath:"./dist/", path : __dirname + "/dist" //輸出文件路徑 }, module:{ rules:[ { test:/.js$/, use:[ {loader:"babel-loader"} ] }, { test: /.css$/, use: [ {loader:"style-loader"}, {loader:"css-loader", options: { importLoaders: 1 } }, {loader:"postcss-loader", options:{// 如果沒有options這個選項將會報錯 No PostCSS Config found plugins:(loader) => [ require("autoprefixer")( {broswers:["last 5 versions"]} ), //CSS瀏覽器兼容 ] } } ] },/*解析css, 并把css添加到html的style標簽里*/ { test: /.(jpg|png|gif|svg)$/, use: [ { loader:"url-loader", options:{ limit: 500,//圖片小于500的話就把圖片轉為base64格式 outputPath: "assets/images/", name: "[hash].[ext]", } } ] }, { test: /.less$/, use: [ {loader:"style-loader"}, {loader:"css-loader", options: { importLoaders: 1 } }, {loader:"postcss-loader", options:{// 如果沒有options這個選項將會報錯 No PostCSS Config found plugins:(loader) => [ require("autoprefixer")( {broswers:["last 5 versions"]} ), //CSS瀏覽器兼容 ] } }, {loader:"less-loader"} ] },/*解析less, 把less解析成瀏覽器可以識別的css語言*/ { test: /.sass$/, use: [ {loader:"style-loader"}, {loader:"css-loader", options: { importLoaders: 1 } }, {loader:"postcss-loader", options:{// 如果沒有options這個選項將會報錯 No PostCSS Config found plugins:(loader) => [ require("autoprefixer")( {broswers:["last 5 versions"]} ), //CSS瀏覽器兼容 ] } }, {loader:"sass-loader"} ] },/*解析sass, 把sass解析成瀏覽器可以識別的css語言*/ { test: /.html$/, use: [ {loader:"html-loader"} ] } ] }, }
上面講的是打包一個js文件的情況,在實際的開發應用中我們的js文件顯然不止一個,這時候我們需要多個入口文件來執行打包,有以下兩種方式可供大家選擇
一、以一個數組的方式來作為文件的入口
代碼如下
entry:["./src/js/index.js","./src/js/index2.js"],//入口文件 output:{ filename:"layer.js", //輸出的文件名 publicPath:"./dist/", path : __dirname + "/dist" //輸出文件路徑 },
這時候index.js和index2.js會被一起打包到layer.js中,我們在index2.js中打印一個123,打包之后查看layer.js,發現打包過后的文件已經打包完成了這兩個文件,如圖所示
二、以一個對象作為入口的文件
代碼如下
entry:{ a:"./src/js/index.js", b:"./src/js/index2.js" },//入口文件 output:{ filename:"layer.js", //輸出的文件名 publicPath:"./dist/", path : __dirname + "/dist" //輸出文件路徑 },
這個時間我們執行打包,發現我們只能打包其中一個js,另一個js并不能被打包進來,
如下圖所示
我們只有一個chunk值,官網也說這種情況下,我們在output這個出口文件下也需要重新配置一下,我們的filename不再是一個固定的文件名了,而應該是 "[name].js",這樣我們打包的時候,就會自動根據對象的屬性名生成對應的文件,有幾個對象就會生成幾個打包對象,那么就讓我們打包一下看看吧。
這是我們的打包結果,看來是打包成功了,并且生成了a和b兩個js文件
我們在layer.html中引入這兩個js,發現和之前的layer.js是一樣的效果。
你以為這樣就完結了嗎,并沒有,之前我們打包完成之后還是需要手動去引入打包過后的js,這種方法無疑是極為不好的,webpack為我們提供了一個插件,來解決這個問題。
首先我們需要安裝這個插件
npm install html-loader html-webpack-plugin --save-dev
安裝好了之后,我們在webpack.config中去引用這個插件
const htmlWebpackPlugin = require("html-webpack-plugin");
并且在module.exports中新增一個plugins配置項
plugins:[ new htmlWebpackPlugin({ template:"layer.html", filename:"layer.html", }) ]
這時候我們執行打包操作,運行結果如下
我們打包了圖片,兩個js文件和layer.html這個文件,然后我們發現dist目錄下也多了一個layer.html,這個html自動引入了我們打包完成之后的js
表明我們打包成功,以后也不需要擔心去手動引用打包之后的js的問題了。
接下來我們關注一下公共模塊的打包,在實際項目中,我們是有很多個js文件的,這些js文件或多或少有一些公共的模塊,webpack可以將其分離出來
首先我們需要在項目中再次安裝一次webpack,因為我們需要使用webpack的一些插件
在webpack4之前的版本中,打包公共模塊是用如下的方式
var CommonsChunkPlugin = new webpack.optimize.CommonsChunkPlugin("common"); //把公共模塊提取出來, 并取名為"common"(名字自起), webpack之后再out文件夾下生成common.js, 測試時記得引入提取出來的公共模塊js文件
然后在plugins配置中增加一個CommonsChunkPlugin 值就可以了。
但是在webpack4,這種方法已經不能使用了,webpack給我們提供了一種新的方式去提取公共文件使用spiltchunk來代替commonschunkplugin
具體配置如下
新增一個optimization配置項,和plugins同級,
optimization: { runtimeChunk: { name: "manifest" }, splitChunks: { cacheGroups: { commons: { test: /[/]node_modules[/]/, name: "vendor", chunks: "all" } } } },
執行打包
打包成功,我們發現dist文件夾下面多了一個manifest.js,這個js中放的就是a和b的公共模塊
接下來我們來使用webpack服務器,
首先在項目目錄中安裝
npm install webpack-dev-server
在webapck4中,我們可以通過一個devServer的配置項來修改webpack服務器的內容
devServer: { contentBase: path.join(__dirname, "src/dist"), host: "localhost", port:8496, compress: true//是否壓縮 },
host和port共同組成了我們的網絡路徑,port是端口號,這個端口號是可以修改的,然后我們需要引入一個新的插件path
const path = require("path");
我們通過path的join方法來確定路徑,同時我們可以修改一下output的path,使其變為
path : path.resolve(__dirname , "/dist") //輸出文件路徑
然后我們執行
webpack-dev-server --mode development
(可能需要在項目中重新安裝一次webpack-cli)
運行結果如下圖所示
三行信息表明我們的路徑
編譯成功,項目已經成功發布到8496的端口去了
我們可以使用^C來終止該命令
webpack還有一些其他的插件命令可以使用,如
webpack.optimize.UglifyJsPlugin({minimize: true});//代碼壓縮//只支持es5 require("extract-text-webpack-plugin"); //將css獨立引入變成link標簽形式, 使用該插件需要獨立下載"npm install extract-text-webpack-plugin --save-dev", 同時下面的rules也必須更改
這里就不一一贅述了
最后附上我的webpack.config.js的配置
const htmlWebpackPlugin = require("html-webpack-plugin"); const path = require("path"); module.exports = { entry:{ a:"./src/js/index.js", b:"./src/js/index2.js" },//入口文件 output:{ filename:"[name].js", //輸出的文件名 publicPath:"./dist/", path : path.resolve(__dirname , "/dist") //輸出文件路徑 }, devServer: { contentBase: path.join(__dirname, "src/dist"), host: "localhost", port:8496, compress: true }, module:{ rules:[ { test:/.js$/, use:[ {loader:"babel-loader"} ] }, { test: /.css$/, use: [ {loader:"style-loader"}, {loader:"css-loader", options: { importLoaders: 1 } }, {loader:"postcss-loader", options:{// 如果沒有options這個選項將會報錯 No PostCSS Config found plugins:(loader) => [ require("autoprefixer")( {broswers:["last 5 versions"]} ), //CSS瀏覽器兼容 ] } } ] },/*解析css, 并把css添加到html的style標簽里*/ { test: /.(jpg|png|gif|svg)$/, use: [ { loader:"url-loader", options:{ limit: 500,//圖片小于500的話就把圖片轉為base64格式 outputPath: "assets/images/", name: "[hash].[ext]", } } ] }, { test: /.less$/, use: [ {loader:"style-loader"}, {loader:"css-loader", options: { importLoaders: 1 } }, {loader:"postcss-loader", options:{// 如果沒有options這個選項將會報錯 No PostCSS Config found plugins:(loader) => [ require("autoprefixer")( {broswers:["last 5 versions"]} ), //CSS瀏覽器兼容 ] } }, {loader:"less-loader"} ] },/*解析less, 把less解析成瀏覽器可以識別的css語言*/ { test: /.sass$/, use: [ {loader:"style-loader"}, {loader:"css-loader", options: { importLoaders: 1 } }, {loader:"postcss-loader", options:{// 如果沒有options這個選項將會報錯 No PostCSS Config found plugins:(loader) => [ require("autoprefixer")( {broswers:["last 5 versions"]} ), //CSS瀏覽器兼容 ] } }, {loader:"sass-loader"} ] },/*解析sass, 把sass解析成瀏覽器可以識別的css語言*/ { test: /.html$/, use: [ {loader:"html-loader"} ] } ] }, optimization: { runtimeChunk: { name: "manifest" }, splitChunks: { cacheGroups: { commons: { test: /[/]node_modules[/]/, name: "vendor", chunks: "all" } } } }, plugins:[ new htmlWebpackPlugin({ template:"layer.html", filename:"layer.html", }) ] }
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/94098.html
摘要:介紹說明的包管理器,用于插件管理包括安裝卸載管理依賴等使用安裝插件命令提示符執行插件名稱??偨Y安裝新建文件全局和本地安裝安裝插件新建文件通過命令提示符運行任務。 showImg(https://segmentfault.com/img/remote/1460000010873466); 前言 眾所周知目前比較火的工具就是gulp和webpack,但webpack和gulp卻有所不同,本...
摘要:它將根據模塊的依賴關系進行靜態分析,然后將這些模塊按照指定的規則生成對應的靜態資源??梢詫⒍喾N靜態資源轉換成一個靜態文件,減少了頁面的請求。因此我們不再按文件文件的方式運行指令,而是直接運行這樣便能實現打包。 一、什么是webpack 是一個前端資源加載/打包工具。它將根據模塊的依賴關系進行靜態分析,然后將這些模塊按照指定的規則生成對應的靜態資源。它做的事情是,分析你的項目結構,找到J...
?webpack ?安裝 命令行輸入 npm?install?webpack 配置文件?webpack.config.js moudule.exports?=?{ ??//Import?入口文件 ??entry:?./entry.js, ??//Output?dir?輸出目錄 ??output:?{ ????path:?,//當前目錄標識:__dirname ????filename:? ??} ...
摘要:一個文件,一張圖片一個文件都是一個模塊,都能用導入模塊的語法的,的導入進來。自身只能讀懂類型的文件,其它的都不認識。 webpack 是什么? webpack是一個前端模塊化打包工具指(由于模塊化開發,所以需要打包,這里所說的模塊化開發主要指JS) 由于現代前端應用程序越來越復雜,需要采用模塊化進行開發,但瀏覽器還未支持模塊化開發,所以webpack才誕生 webpack默認只支持js...
摘要:學習心得出于對的好奇,決定要去學習門技術,提升自己。安裝命令行輸入回車,全局安裝命令行輸入回車輸出版本號,表示安裝成功。進入到我們的項目中,我創建的項目為,在這個項目下創建配置項,命令行輸入一路回車。 webpack學習心得 出于對webpack的好奇,決定要去學習門技術,提升自己。 什么是webpack? webpack是德國開發者開發的模塊加載器兼打包工具,在webpack中,...
閱讀 1769·2021-10-19 13:30
閱讀 1335·2021-10-14 09:48
閱讀 1531·2021-09-22 15:17
閱讀 2007·2019-08-30 15:52
閱讀 3273·2019-08-30 11:23
閱讀 1983·2019-08-29 15:27
閱讀 887·2019-08-29 13:55
閱讀 753·2019-08-26 14:05