webpack的那些事兒

TNFE 發布于2019-05-23 17:35 / 1411人閱讀

摘要：不管是還是，其實都是基于實現的。文件，看名字就知道它是的配置文件。接下來會向外暴露可以指定是環境還是環境。這個有點不一樣的是他依賴一個的配置文件。注意這三個的順序不能錯，是從右往左執行的。到這里，一個小小的腳手架雛形其實就有了。

不管是vue-cli還是react-sprite，其實都是基于webpack實現的。試想，如果沒有腳手架，你自己能搭一個嗎？看完這篇博客，讓你明白webpak都有些什么東西?

?webpack其實沒有那么神奇，就是一個打包工具，而且它本身只能打包js，而圖片，css，html其實都是依靠它的loader和plugin完成的。?

webpack.config.js文件，看名字就知道它是webpack的配置文件。該文件一般包括：入口entry，出口output，loader和插件plugin

const path = require("path")
module.exports = {
  mode: "development",
  entry: "./src/1.js",
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "bundle.js"  },
  module: {
    rules: [{
      test: /.css$/,
      use: ["style-loader", "css-loader", "postcss-loader"]
    }]
  }}

來解析下上面的代碼，

第一行的path其實是node的核心模塊，webpack其實就是基于node的產物，你的電腦要是沒有node，你也裝不了webpack的。?

接下來會向外暴露：?

mode可以指定是development環境還是production環境。腳手架沒有這一項，因為它已經分了dev.conf.js和prod.conf.js。?

entry指定你要打包的入口文件，

output指定你要打包到哪和打包文件的名字。

module模塊一般用來設置你代碼中要打包的css，圖片之類的loader。

上面就是解析css的loader，肯定有人好奇為什么會有三個：?

style-loader：將會創建style標簽，將樣式放到頁面中?

css-loader：將css代碼轉成js能接受的字符串?

post-loader：尋找那些需要瀏覽器兼容加前綴的樣式，比如-webkit-，你沒加，但loader會幫你補全，是不是很省心。這個loader有點不一樣的是他依賴一個autoprefixer的配置文件。

這也就能解釋為什么你的項目中引入less，sass之類的擴展語言要寫三個loader。??

注意：這三個loader的順序不能錯，loader是從右往左執行的。接下來的devtool不是必須的，他會保留代碼編譯前的模樣，方便調式，上線一定要關掉，不然會讓你打包的大小增大很多。?? 自己配置一個webpack：

上面的build里的bundle.js就是打包后生成的文件。webpack.config.js就是上面的代碼，postcss.config.js就是postcss-loader需要的配置文件

//1.js
import "../css/1.css"
console.log(111)

//postcss.config.js
const autoprefixer = require("autoprefixer")
module.exports = {  plugins: [    autoprefixer  ]}

//1.css
#div1 {
  width: 200px;
  height: 200px;
  transition: 1s all ease;
  background-color: rgb(148, 148, 148);
}
#div1:hover {
  transform: rotateY(60deg)
}

此時，在命令行中運行webpack，就會生成上面的build文件夾，打開index.html，你會發現，這就是我們自己寫的css和js。這樣就完成了打包，是不是很簡單？

我們可能還會好奇webpack為什么能夠起一個服務環境，實現熱更新等功能，這就不能不說webpack-dev-server了。

實現熱更新：

這個不需要我們配置，但需要依賴，所以我們要：

npm i webpack webpack-cli webpack-dev-server

注意：這里的啟動命令要在package.json文件里配置

{  
"scripts": { 
   "dev": "webpack-dev-server --progress --hot",  
},  
"devDependencies": {
    "autoprefixer": "^9.5.1",
    "css-loader": "^2.1.1", 
   "postcss-loader": "^3.0.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.31.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.3.1"
  }}

此時，你在命令行輸入npm run dev，會發現你的項目已經監聽8080端口啦

如果要配置webpack-dev-server，也可以在webpack.config.js中進行配置:

devServer:{
    hot: true,        //設置熱更新
    host: "localhost", //可選，ip
    port: 3000, //可選，端口
    contentBase:path.resolve(__dirname,"build"), //可選，基本目錄結構
    compress: true, //可選，壓縮    proxy: {
        "/api": {
            target: "http://localhost:8081",
            pathRewrite: {"^/api": "/data"} 
//本來是反向代理去http://localhost:8081/api，rewrite之后就反向代理去http://localhost:8081/data
        }
    }}

到目前為止，我們生成的index.html文件其實還是本地文件，那么我們如何生成一個服務器訪問的html文件呢？這里就要引入html-wepack-plugin插件了。

npm i html-webpack-plugin -S

  plugins: [
    new HtmlWebpackPlugin({
      template: "./build/index.html"
    }),    
new webpack.HotModuleReplacementPlugin({})
  ]}

這里我把我build文件夾下的index.html。

到這里，一個小小的腳手架雛形其實就有了。剩下的就是配置各種各樣的loader啦

因為loader的配置都是大同小異，這里就不做過多介紹。

具體可以戳這里www.webpackjs.com/loaders/

附上完整的webpack.config.js

const path = require("path") class="hljs-keyword">const webpack = require("webpack") class="hljs-keyword">const HtmlWebpackPlugin = require("html-webpack-plugin") class="hljs-built_in">module.exports = { class="hljs-attr">mode: "development",  entry: "./src/1.js", class="hljs-attr">output: { class="hljs-attr">path: path.resolve(__dirname, "build"), class="hljs-attr">filename: "bundle.js" class="hljs-attr">module: { class="hljs-attr">rules: [ class="hljs-attr">test: /.css$/,      use: ["style-loader", "css-loader", "postcss-loader"]    } class="hljs-attr">devServer: { class="hljs-attr">host: "localhost", //可選，ip class="hljs-number">3000, //可選，端口 path.resolve(__dirname, "build"), //可選，基本目錄結構 class="hljs-literal">true, //可選，壓縮    hot: true  }, class="hljs-keyword">new HtmlWebpackPlugin({ class="hljs-attr">template: "./build/index.html" class="hljs-keyword">new webpack.HotModuleReplacementPlugin({}) class="copy-code-btn">

GPU云服務器云服務器回事兒 webpack的作用 webpack的cdn 那些奇怪的錯誤

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/7403.html

webpack2的那些事兒 ------ 生成的文件是怎么運行的

摘要：打算寫幾篇文章如果能堅持的話來總結下，文章不是教你怎么使用，而是讓你更好的了解你在使用的是怎么去運行的，想來想去，第一篇就先介紹下生成的文件，是怎么去執行的。謝謝你們看我扯技術，最近在對webpack2進行的配置進行梳理和學習，webpack是在去年使用vue開始接觸的，個人感覺webpack 融入到編程過程中，提供了模塊化，將各種類型的文件都看成模塊，通過不同的 loader 進行...

anonymoussf 2019-08-20 14:36 評論0 收藏0
webpack4.0實戰那些事兒

摘要：剛剛發布，官網自稱最大的特點就是零配置。本文就詳細介紹一下實戰那些事兒。自動刷新監聽本地源代碼的變化，自動重新構建刷新瀏覽器。自動發布更新完代碼后，自動構建出線上發布代碼并傳輸給發布系統。代碼塊，一個由多個模塊組合而成，用于代碼合并與分割。 webpack4.0剛剛發布，官網自稱4.0最大的特點就是零配置。本文就詳細介紹一下webpack4.0實戰那些事兒。 1 什么是WebPack ...

褰辯話 2019-08-22 15:55 評論0 收藏0
前端模塊化的那些事兒

摘要：規范異步模塊聲明規范公共模塊聲明模塊化的核心價值模塊化最核心的價值在于解決不同文件之間的分工和調用問題，即依賴關系。一、什么是模塊？定義：具有相同屬性和行為的事物的集合在前端中：將一些屬性比較類似和行為比較類似的內容放在同一個js文件里面，把這個js文件稱為模塊目的：為了每個js文件只關注與自身有關的事情，讓每個js文件各行其職二、什么是模塊化？CommonJS是什么？AMD和C...

aaron 2019-08-20 12:11 評論0 收藏0
淺談Vue模板的那些事兒

摘要：接觸過的童鞋都知道，組件的模板一般都是在選項內定義的，如我是閏土大叔這個用法都是老生常談了，今天來聊聊的內聯模板。作者閏土大叔鏈接來源著作權歸作者所有。 showImg(https://segmentfault.com/img/bV1Og9?w=554&h=294); 接觸過vue的童鞋都知道，組件的模板一般都是在template選項內定義的，如： 1 Vue.component(ch...

focusj 2019-08-21 18:46 評論0 收藏0
webpack4.0優化那些事兒

摘要：配置以何種方式導出庫。當檢測文件不再發生變化，會先緩存起來，等等待一段時間后之后再通知監聽者，這個等待時間通過配置。發布到線上給用戶使用的運行環境。一縮小文件搜索范圍 1 include & exclude 1) action 限制編譯范圍 2) useage module: { rules: [ { test...

levy9527 2019-08-22 15:57 評論0 收藏0