webpack的使用

---恢復內容開始---

 

 

webpack主要處理新語法，可是瀏覽器不識別，用webpack前端工具，處理成瀏覽器認識的

添加webpack的依賴
npm init -y
npm install webpack

處理指定的文件，而且指定輸出文件的目錄和名字
webpack  .\src\main.js  .\dist\bubdle.js

使用的時候

<script src="./dist/bundle.js"></script>

實現webpack熱部署,使用webpack-dev-server，注意本地項目中必須安裝webpack

須要配置文件

指定配置文件的名字，webpack.config.js

安裝到工程開發依賴,使用的時候和webpack的命令是同樣的。直接使用webpack-dev-server

注意是在項目中本地安裝，因此不能當作腳本命令直接在命令行置直接執行，只能全局安裝才能

在package.json配置腳本命令，scripts中設置,這樣就能夠直接命令行經過npm run dev執行webpack-dev-server

"dev" : "webpack-dev-server"

注意使用的時候安裝webpack-dev-server到工程的本地目錄

cnpm i webpack-dev-server -D

這種直接是工程的根目錄，若是本身想訪問打包後的bundle.js，直接訪問 根目錄/bundle.js

熱部署使用的時候使用的是根目錄下的bundle.js,打包生成的bundle.js沒有存在物理磁盤中，在內存中託管

使用的時候直接

<scripts src="/bundle.js"></scripts>

因此配置文件中不須要output了。

 

webpack-dev-server的配置參數

自動打開瀏覽器的設置，還有指定端口3000,上來打開指定的目錄src，加上--hot，局部更新，減小沒必要要重載，瀏覽器自動刷新
"dev" : "webpack-dev-server --open --port 3000 --contentBase src --hot"

還有一種直接在webpack.config.js中直接使用webpackServer配置

 

安裝在內存中生成頁面的插件

安裝webpack插件

cnpm i html-webpack-plugin -D

 

htmlWebpackPlugin的插件：實現HTML文件加載到內存，本身處理bundle.js文件

const path = require('path')

const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  //  入口文件
  entry: path.join(__dirname, './src/mian.js'),

  plugins: {
      new htmlWebpackPlugin({//   
      template: path.join(__dirname,'./src/index.html'),
      filename: 'index.html'
    })
  }
}

 

 

解決css會發生二次ajax請求

直接導入樣式,在main.js中

import  './css/index.css'

須要這種方式，就須要安裝style-loader 和css-loader

cnpm i style-loader css-loader -D

打開配置文件，新增配置節點新增配置節點modules，有個rules屬性，是個數組，數組中存放全部第三方文件的匹配和處理規則

  module: { //這個節點用於配置全部的第三方模塊加載器
    rules: [ //匹配規則
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
    ]
  }

多個loader的時候調用的規則是從右到左的形式，就是先調用後面的loader

 

處理less文件.使用的時候的方式import  './css/index.less'

安裝插件

安裝less

cnpm i less -D

安裝加載器

cnpm i less-loader -D

  module: { //這個節點用於配置全部的第三方模塊加載器
    rules: [ //匹配規則
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      //less配置的形式
      {test: /\.less$/, use: ['style-loader','css-loader','less-loader']},
    ]
  }

處理scss文件

import  './sass/index.sass'

cnpm i node-sass -D

cnpm i sass-loader -D

配置新的loader

  module: { //這個節點用於配置全部的第三方模塊加載器
    rules: [ //匹配規則
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      //less配置的形式
      {test: /\.less$/, use: ['style-loader','css-loader','less-loader']},
      {test: /\.sass$/, use: ['style-loader','css-loader','sass-loader']},
    ]
  }

webpack沒法處理文件中的地址，不管是圖片仍是字體庫，

須要第三方的loader

cnpm i file-loader

cnpm i url-loader

在配置文件中添加匹配規則

  module: { //這個節點用於配置全部的第三方模塊加載器
    rules: [ //匹配規則
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      //less配置的形式
      {test: /\.less$/, use: ['style-loader','css-loader','less-loader']},
      {test: /\.sass$/, use: ['style-loader','css-loader','sass-loader']},
      {test: /\.(jpg|png|bmp|jpeg)$/,use: 'url-loader?limit=7632&name=[name].[ext]'} 
    ]
  }

綠色部分是指當圖片大小小於指定大小就會轉成base64編碼的圖片，不然就是專成真正的URL地址，地址也會變，主要是防止文件名字的重複，紅色是指不修更名字和文件後綴，正常不設置

或者使用下面的形式，加上前綴hash值

{test: /\.(jpg|png|bmp|jpeg)$/,use: 'url-loader?limit=7632&name=[hash:8]-[name].[ext]'} 

頁面上引用字體圖標

安裝cnpm i bootstrap -D

在main.js中直接import  'bootstrap/dist/css/bootstrap.css'

注意不寫node_modules也行，前面不要加上/

使用url-loader處理樣式文件

{test: /\.(ttf|eot|woff|woff2)$/,use: 'url-loader'}

注意package.json是json文件，不能在裏面寫註釋

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---恢復內容結束---