乐趣区

webpack4.0入门学习笔记（一）

jiezi

初始化项目

  • 创建项目

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

在 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 的资源
            }
          },
          'sass-loader',
          'postcss-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 模块化打包，避免样式文件之间相互影响
            }
          },
          'sass-loader',
          'postcss-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，类名是一串比较复杂的字符串，从而避免这个样式对别的元素产生影响。

退出移动版