webpack4.0入門學習筆記(一)

系列博客鏈接

• webpack4入門學習筆記(一)
• webpack4入門學習筆記(二)

代碼

下載代碼：github

初始化項目

創建項目
mkdir webpack4-demo
cd webpack4-demo

npm init -y

安裝
npm install webpack --save-dev

安裝指定版本
npm install --save-dev webpack@<version>

webpack 4+ 版本，還需要安裝webpack-cli
npm install webpack-cli --save-dev

建議本地安裝webpack和webpack-cli
目前webpack最新版本爲：4.30.0，也是本文學習webpack使用的版本

項目目錄結構

執行npx webpack index.js命令，生成dist目錄，dist目錄下是對index.js打包後得到的文件，默認是main.js文件。

webpack4的簡單配置

entry和output配置

webpack.config.js文件

const path = require('path')

module.exports={
  mode: 'development', //development: 開發環境　production：生產環境
  //入口文件配置
  //entry: './src/index.js',
  //等價於 
  /*entry: {
    main: './src/index.js'
  },*/
  
  entry: {
    index: './src/index.js'
  },
  
  //打包完成後文件存放位置配置
  output: {
    //filename 設置打包後文件的名字
    //如果不設置filename，則文件的名字跟入口文件路徑的屬性名一樣
    filename: 'bundle.js',
    
    //path 設置打包完成後文件存放路徑
    path: path.resolve(__dirname,'dist')
  }
}

在項目根目錄下新建src文件夾，在src文件夾下新建index.js(入口文件)文件

執行npx webpack命令

npx webpack等價於npx webpack --config webpack.config.js

當配置文件命名爲webpack.config.js時可以省略--config *.js直接執行npx webpack即可，否則執行npx webpack --config 配置文件名。

結果

在package.json中配置'script'來執行npx webpack命令。

"scripts": {
    "start": "webpack"
  }

添加"start": "webpack"，運行npm run start效果等價於執行npx webpack命令。

配置webpack.config.js的modoule對象

modoule對象主要是對loader的配置

file-loader的使用

安裝file-loader
npm i file-loader --save-dev

webpack.config.js文件

const path = require('path')

module.exports={
  mode: 'development', //development: 開發環境　production：生產環境
  //入口文件配置
  //entry: './src/index.js',
  //等價於 
  /*entry: {
    main: './src/index.js'
  },*/
  entry: {
    index: './src/index.js'
  },
  //打包完成後文件存放位置配置
  output: {
    //filename 設置打包後文件的名字
    //如果不設置filename，則文件的名字跟入口文件路徑的屬性名一樣
    filename: 'bundle.js',
    //path 設置打包完成後文件存放路徑
    path: path.resolve(__dirname,'dist')
  },
  module: {
    rules:[
      {
        test: /\.(png|jpg|gif)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]', //對打包後的圖片命名
            outputPath: 'images/' //打包後圖片放的位置　dist\images
          }
        }
      }
    ]
  }
}

index.js文件

//index.js

//import導入圖片
import image from './images/11.png'

let img=new Image()
img.src=image
document.body.append(img)

npm run start後的目錄結構

在dist目錄下出現了images目錄和圖片，創建index.html，引入js文件，在瀏覽器中打開就可以看到圖片。

url-loader的使用

url-loader安裝
npm i url-loader -D

url-loader的作用跟'file-loader'的作用很類似

webpack.config.js文件的module對象中添加url-loader配置

  module: {
    rules:[
      {
        test: /\.(png|jpg|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            name: '[name].[ext]', //對打包後的圖片命名
            outputPath: 'images/', //打包後圖片放的位置　dist\images
            limit: 2048 
            //1024 == 1kb  
            //小於200kb時打包成base64編碼的圖片否則單獨打包成圖片
          }
        }
      }
    ]
  }
}

url-loader打包的圖片是字符串，base64編碼的圖片，並且打包進index.js文件中。

limit屬性：當圖片大小大於屬性值時打包成單獨的圖片，否則打包成base64編碼的圖片。

因爲base64編碼的圖片比較大，所以圖片比較小時打包成base64編碼的圖片，圖片比較大時單獨打包成一張圖片。

對css和scss的打包

安裝相應的loader
npm i css-loader style-loader -D
npm i node-sass sass-loader -D
npm i postcss-loader -D
npm i autoprefixer -D

postcss-loader和autoprefixer配合使用可以在打包過程中自動添加前綴

在項目根目錄下新建postcss.config.js，配置如下

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

在webpack.config.js文件的module對象中添加配置

module:{
  rules:[
    {
      test: /\.css$/,
       use:[
         'style-loader',
         'css-loader',
         'postcss-loader'  
         //加前綴  npm i autoprefixer -D
         //在項目根目錄下配置postcss.config.js文件
       ]
     },
     {
        test: /\.scss$/,
        use:[
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              //importLoaders
              //用於配置css-loader作用於@import的資源之前有多少個loader先作用於@import的資源
            }
          },
          'postcss-loader' ,
          'sass-loader'
        ]
      }
  ]
}

//index.js

import './style.css'
import image from './images/11.png'
import './index.scss'

let img=new Image()
img.src=image
let root=document.getElementById('root')
root.append(img)

css模塊化

//webpack.config.js

module:{
  rules: [
    {
        test: /\.scss$/,
        use:[
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              //importLoaders
              //用於配置css-loader作用於@import的資源之前有多少個loader先作用於@import的資源
              modules: true //加載css模塊化打包，避免樣式文件之間相互影響
            }
          },
          'postcss-loader',
          'sass-loader'
        ]
     }
  ]
}

//index.js

import image from './images/11.png'
import style from './index.scss'

let img=new Image()
img.src=image

//style.img .img是scss文件中寫好的類名
img.classList.add(style.img)

let root=document.getElementById('root')
root.append(img)

//scss

.img{
  width: 150px;
  height: 150px;
  border: 10px solid goldenrod;
  background: red;
  border-radius: 30%;
}

結果

可以看到添加了一個class，類名是一串比較複雜的字符串，從而避免這個樣式對別的元素產生影響。