webpack5入门

基本使用

创建这些基础的文件

 初始化项目

npm init -y

package.json的main指向src/main.js

 安装打包工具

 npm i webpack webpack-cli

指定打包开发环境

npx webpack ./src/main.js --mode=development 

打包后会创建一个dist文件夹 

指定打包生产环境

npx webpack ./src/main.js --mode=production 

生产环境打包会吧main.js进行压缩

 然后再index.html去指向dist下面的main.js

 然后再控制台就打印了js的内容

打开html浏览器插件

安装 open in browser

在index.html 鼠标右键 选择倒数第二个就是了 

5大核心概念

1.entry(入口)

指示webpack从那个文件开始打包

2.output （输出）

指示webpack打包完的文件输出到哪里去，如何命名等

3.loader(加载器)

webpack本身只能处理js ,json等资源，其他资源需要借助loader,webpack才能解析

4.plugins(插件)
扩展webpack的功能

5.mode(模式)
开发模式:development
生产模式:production
 

基本配置

 在项目根目录下创建webpack.config.js，不是src目录下,一定要注意

const path=require('path')
module.exports={
    //入口 相对路径
    entry:"./src/main.js",
    //输出
    output:{
        //文件的输出路径 
        //__dirname 当前文件的文件夹目录
        path:path.resolve(__dirname,"dist"),
        //生成在dist目录下的文件名
        filename:"main.js",
    },
    //加载器
    module:{
        //规则
        rules:[
            //loader的配置
        ]
    },
    //插件
    plugins:[
        //plugin的配置    
    ],
    //模式
    mode:"development"

}

输入打包命令 npx webpack，就会创建dist目录和dist目录下的main.js

 浏览器打开index.html,就能看到效果

处理css资源

创建src\css\index.css

.aaa{
    background-color: red;
    width: 100px;
    height: 100px;
}

在main.js引入css样式

 在打包的时候可以看到，webpack是不支持css的

 然后安装css的loader

 npm i style-loader css-loader

在规则这里配置loader

//规则
        rules:[
            //loader的配置
            {
                //只检测.css文件
                test:/\.css$/,
                //执行顺序 从右到,从下到上
                use:[
                    //将js中css通过创建style标签添加到html文件中生效
                    "style-loader",
                    //将css资源编译成commonjs的模块到js中
                    "css-loader"
                ]
            }
        ]

 

然后输入npx webpack 重新打包

 

可以看到样式生效了，自动给引入了style标签 

处理less资源

webpack也不支持less,需要安装less-loader

npm i less less-loader

创建src\less\index.less 

.bbb{
    background-color: blue;
    width: 200px;
    height: 200px;
}

main.js引入less

 在规则中配置less的loader

//loader的配置
            {
                //只检测.less文件
                test:/\.less$/,
                //执行顺序 从右到,从下到上
                use:[
                    //将js中css通过创建style标签添加到html文件中生效
                    "style-loader",
                    //将css资源编译成commonjs的模块到js中
                    "css-loader",
                     "less-loader"
                ]
            }

打包后 可以看到效果出来了

处理sass资源

创建src\sass\index.sass，注意这里是没有括号的，也没有分号

.ccc
    background-color: red
    width: 300px
    height: 300px

在main.js引入sass

import './sass/index.sass'

在规则配置sass

 //规则
        rules:[
            //loader的配置
            {
                //只检测.sass
                test:/\.sass$/,
                //执行顺序 从右到,从下到上
                use:[
                    //将js中css通过创建style标签添加到html文件中生效
                    "style-loader",
                    //将css资源编译成commonjs的模块到js中
                    "css-loader",
                    "sass-loader"
                ]
            },
            
        ]

webpack也不支持sass,需要安装sass-loader

npm i sass sass-loader

删除上一次的dist文件夹

只需要配置

clean:true

处理html资源

之前我们都是手动设置的index.html,引入的main.js,现在删掉引入main.js

现在我们需要安装html插件，来自动引入main.js

npm i html-webpack-plugin

在插件这里配置下面的参数

   //插件
    plugins:[
        //plugin的配置    
        new HtmlWebpackPlugin({
            //把index.html也打包进去，自动引入main.js
            template:'./public/index.html'
        })
    ],

 

可以看到dist目录下，就有了index.html并自动引入main.js

 

搭建开发服务器

安装webpack-dev-server

npm i webpack-dev-server

 在webpack.config.js中设置开发服务器,

这里要注意，因为我们的是开发服务，都在内存中，所以dist文件夹是不创建代码的

  //开发服务器
    devServer:{
          //域名
          host:'localhost',
          //端口
          port:3000,
          //是否自动打开浏览器 true 打开 false 不打开
          open:true  
    },

启动服务

npx webpack serve 

浏览器访问devServer配置的信息，修改js的代码，界面自动刷新，不需要重新编译

http://localhost:3000/

生产环境准备工作

删除之前的webpack.config.js

创建config\webpack.dev.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path=require('path')
module.exports={
    //入口 相对路径
    entry:"./src/main.js",
    //输出
    output:{
        //文件的输出路径 
        //__dirname 当前文件的文件夹目录
        path:path.resolve(__dirname,"../dist"),
        //生成在dist目录下的文件名
        filename:"main.js",
        //自动把上次的dist文件夹删除
        clean:true
    },
    //加载器
    module:{
        //规则
        rules:[
            //loader的配置
            {
                //只检测.sass
                test:/\.sass$/,
                //执行顺序 从右到,从下到上
                use:[
                    //将js中css通过创建style标签添加到html文件中生效
                    "style-loader",
                    //将css资源编译成commonjs的模块到js中
                    "css-loader",
                    "sass-loader"
                ]
            },
            
        ]
    },
    //插件
    plugins:[
        //plugin的配置    
        new HtmlWebpackPlugin({
            //把index.html也打包进去，自动引入main.js
            template:'./public/index.html'
        })
    ],
    //开发服务器
    devServer:{
          //域名
          host:'localhost',
          //端口
          port:3000,
          //是否自动打开浏览器 true 打开 false 不打开
          open:true  
    },
    //模式
    mode:"development"

}

创建config\webpack.prod.js和上面的内容一样，模式改成production，devServer去掉

 在package.json中配置启动脚本命令

  "scripts": {
    "start": "npm run dev",
    "dev":"webpack serve --config ./config/webpack.dev.js",
    "build":"webpack --config ./config/webpack.prod.js"
  },

 npm run dev 启动开发环境，不用打包，或者npm start

 npm run build 打包生产环境

提取css文件成单独文件

安装mini-css-extract-plugin

npm i mini-css-extract-plugin

 修改config\webpack.prod.js，引入mini-css-extract-plugin，把之前的style-loader改成

MiniCssExtractPlugin.loader，并设置filename对应的文件名

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path=require('path')
const MiniCssExtractPlugin=require('mini-css-extract-plugin')
module.exports={
    //入口 相对路径
    entry:"./src/main.js",
    //输出
    output:{
        //文件的输出路径 
        //__dirname 当前文件的文件夹目录
        path:path.resolve(__dirname,"../dist"),
        //生成在dist目录下的文件名
        filename:"main.js",
        //自动把上次的dist文件夹删除
        clean:true
    },
    //加载器
    module:{
        //规则
        rules:[
            //loader的配置
            {
                //只检测.sass
                test:/\.sass$/,
                //执行顺序 从右到,从下到上
                use:[
                   
                    MiniCssExtractPlugin.loader,
                    //将css资源编译成commonjs的模块到js中
                    "css-loader",
                    "sass-loader"
                ]
            },
            
        ]
    },
    //插件
    plugins:[
        //plugin的配置    
        new HtmlWebpackPlugin({
            //把index.html也打包进去，自动引入main.js
            template:'./public/index.html'
        }),
        new MiniCssExtractPlugin({
            //生成的文件名
            filename:'css/main.css'
        })
    ],
    //模式
    mode:"production"

}

这样打包的时候就会把所有的css样式，都单独打成一个main.css文件