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

初始化项目

• 创建项目

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 的打包

在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，类名是一串比较复杂的字符串，从而避免这个样式对别的元素产生影响。