前端开发-Webpack使用流程

1.创建目录

在根目录webpack里创建两个子文件夹 public 和 src

 在根目录打开终端

点击根目录或空白处,右键选择 在集成终端中打开.

注意,必须在根目录打开终端.

初始化: npm init -y

使用npm命令前先安装node环境

初始化后,在根目录里生成了一个 package.json 文件 

 安装webpack: npm i webpack webpack-cli -D

检测是否安装成功: npx webpack -v

安装成功后 创建了一个文件夹 node_modules 和一个文件 package-lock.json

 

在src文件夹中新建index.js文件

webpack默认的打包文件入口目录是 ./src/index.js  也就是入口文件

 

 

执行打包命令： npx webpack

创建文件夹dist ,并将打包好的文件main.js存入      也就是出口文件

 

 创建配置文件 webpack.config.js

在根目录创建配置文件 webpack.config.js

写入

module.exports = {
    //自定义配置写在这里（对象键值对）

}

 以上,根目录主要文件创建完成

2.webpack配置

常见配置

• 1.mode : 打包模式

  • 默认值production : 生产模式（压缩，混淆，加密....... 不可读）

  • development :开发模式(代码不会压缩 混淆)

• 2.output: 出口文件(对象类型)

  • path : 设置出口文件夹（必须是绝对路径）

    • 默认值: ${__dirname}/dist

  • filename: 设置出口js文件名 (相对于path路径)

    • 默认值: main.js

• 3.entry : 入口文件

  • 默认值(相当于项目根目录): ./src/index.js

module.exports = {
	//自定义配置写在这里（对象键值对）
    //打包模式
    //默认值 production: 生产模式(压缩)
    // development :开发模式(不压缩)
    mode : 'production',


    //出口文件
    output : {
        //出口文件夹路径
        path : `${__dirname}/dist`,
        //出口文件路径
        filename : 'main.js'
    },

    
    //入口文件
    entry :`${__dirname}/src/index.js`,
}

webpack其他配置

写在package.json文件中的script对象里面

• "build" : "webpack"

  • 相当于是给你的当前项目新增了一个命令: npm run build

    • 这个命令等价于npx webpack, 只是额外新增了一个命令。 原来的默认命令还是可以用

• "dev": "webpack --config webpack.dev.js"

  • 相当于给你的当前项目新增了一个命令 ： npm run dev

    • 这个命令将不再使用默认的配置文件webpack.config.js, 而是使用自定义配置文件 webpack.dev.js

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --config webpack.dev.js",      
    "build": "webpack" 
  },

webpack插件和加载器

插件作用 ： 给webpack添加额外的功能

1.处理html文件插件  npm i html-webpack-plugin -D

• 在 webpack.config.js中导入插件

  • const HtmlWebpackPlugin = require('html-webpack-plugin')

• 在 plugins中配置插件(不同的插件需要去官网找具体配置项)

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
	//自定义配置写在这里（对象键值对）
    //打包模式
    //默认值 production: 生产模式(压缩)
    // development :开发模式(不压缩)
    mode : 'production',

    //出口文件
    output : {
        //出口文件夹路径
        path : `${__dirname}/dist`,
        //出口文件路径
        filename : 'main.js'
    },

    //入口文件
    entry :`${__dirname}/src/index.js`,

    //html插件
    plugins: [
        new HtmlWebpackPlugin({ // 打包输出HTML
             minify: { // 压缩HTML文件
                 removeComments: true, // 移除HTML中的注释
                 collapseWhitespace: true, // 删除空白符与换行符
                 minifyCSS: true// 压缩内联css
             },
             template: `./public/index.html` // 指定压缩哪一个html文件, 相对于根目录
         })
     ]
}

一般vue项目只会有一个唯一的html文件:index.html

index.html在vue中会自动放入./public目录中

2.处理css文件加载器  npm i css-loader -D  和  npm i style-loader -D

在src文件夹内创建css文件夹 将index.css文件放在css文件夹中

在index.js中导入css文件 输入   import '../css/index.css'

插件下载命令 :

npm i css-loader -D     

开发依赖： 这个插件是让webpack可以识别css文件（因为webpack默认只识别js文件）

npm i style-loader -D   

开发依赖：这个插件是让webpack在打包的时候，把样式插入到html文件中

配置插件:在webpack.config.json中配置css插件  (跟html插件平级)

//静态处理资源
     module:{ // 处理非js模块
        rules:[ // 规则
          {
            test: /\.css$/, 		// 正则测试
            use: ['style-loader','css-loader'] 	// loader
          }
        ]
      }

3.处理less文件加载器 npm i less-loader less -D

less插件：把你的less语法转成css语法

less-loader插件：让webpack可以识别less文件

配置插件:在module的rules里配置less插件

    rules:[ // 规则
          {
            test: /\.css$/, 		// 正则测试
            use: ['style-loader','css-loader'] 	// loader
          },
          {
            test: /\.less$/,     // 正则匹配，以.less结尾的文件
            // 如果发现是.less文件，则由如下三个loader来处理
            // 处理的顺序是   从右向左
            // less-loader: 作用是加载less文件，会帮你less转成css
            // css-loader: 作用是允许.js中引入.css
            // style-loader:作用是在.html上创建style标签，把css代码输入进去
            use: ['style-loader', 'css-loader', 'less-loader'] // 匹配成功，使用指定的loader
        },
        ]

4.处理图片文件加载器 无需下载

配置插件:在module的rules里配置图片插件

       {
            test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图片文件
            type: 'asset' // 在导出一个 data URI 和一个单独的文件之间自动选择
        }

模块化导入图片:import 变量名 from '图片路径'

在index.js中写入 

//导入图片
import url1 from './img/1.png'
//设置图片
document.querySelector('.img1').src = url1