Webpack各项资源的简单配置

Webpack简单资源配置

安装Webpack

​ 1、进行全局安装：npm install webpack@4.41.6(版本号) webpack-cli@3.3.11 -g

​ 2、进行局部安装：npm install webpack@4.41.6 webpack-cli@3.3.11

Webpack项目的初始化

​ 1、进行开发依赖：npm install webpack@4.41.6 webpack-cli@3.3.11 -D

​ 2、初始化：npm init

​ 3、在文件项目下新建src（项目源代码目录）、build（webpack打包处理之后输出的目录）文件夹

​ 4、在src下新建一个index.js入口文件

​

Webpack运行指令

运行指令：

开发环境：webpack ./src/index.js -o ./build/built.js --mode=development

webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js

整体打包环境，是开发环境

生产环境：webpack ./src/index.js -o ./build/built.js --mode=production

webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js

整体打包环境，是生产环境

Webpack打包样式资源（loader）

配置webpack.config.js：所有的构建工具都是基于nodejs平台运行的，所以模块化默认采用commonjs

基本配置

const {resolve} = require('path')
/*
  loader: 1. 下载   2. 使用（配置loader）
  plugins: 1. 下载  2. 引入  3. 使用
*/
module.exports = {
    // 入口起点
    entry: './src/index.js',
    // 输出
    output:{
        // 输出文件名
        filename: 'built.js',
        // 输出路径
        // __dirname nodejs的变量，代表当前文件的目录绝对路径; build为目录名
        path: resolve(__dirname, 'bulid')
    },
    // loader样式资源配置
    module:{
        rules:[
            // loader详细配置
            // 不同的文件必须配置不同的loader进行处理，并且不能进行复用
           {
                // 匹配哪些文件
                test: /\.css$/,
                // use数组中loader执行顺序：从右到左，从下到上 依次执行
                use:[
                	//npm i css-loader@3.4.2 style-loader@1.1.3 -D
                    // 创建style标签，将js中的样式资源插入进行，添加到head中生效
                    'style-loader',
                    // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
                    'css-loader'
                ]
           },
            {
               test: /\.less$/,
               use:[
                   // 创建style标签，将js中的样式资源插入进行，添加到head中生效
                   'style-loader',
                   // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
                   'css-loader',
                    // 将less文件编译成css文件
                     // 需要下载 less-loader和less,指令为：npm i less@2.3.1 less-loader@5.0.0 -D
                   'less-loader'
               ]
           }
            
        ]
    },
    // 插件配置
    plugins:[],
    // 模式
    mode: 'development' //开发模式
    // mode: 'pruduction' //生产模式
}

安装style-loader、css-loader指令为：npm i css-loader@3.4.2 style-loader@1.1.3 -D 其他指令也类似

然后可以执行webpack指令进行打包

Webpack打包HTML资源

核心代码

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

    // 插件配置
    plugins:[
         // html-webpack-plugin
        // 安装指令：npm i html-webpack-plugin@3.2.0 -D
        // 功能：默认会创建一个空的HTML文件，自动引入打包输出的所有资源（js/css）
        // 需要有结构的HTML文件
        new HtmlWebpackPlugin({
            // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
            template: './src/index.html'
        })
    ],

Webpack打包图片资源

核心代码

    module:{
        rules:[
            {
            	//样式里使用了img图片
                test:/\.less$/,
                // 要使用多个loader处理用use
                use:[
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {   
                // 以下的配置默认是处理不了htlm中的img图片的
                // 处理图片资源
                test: /\.(jpg|png|gig)$/,
                // 使用一个就用loader
                 // 下载 url-loader file-loader,指令为：npm i url-loader@3.0.0 file-loader@5.0.2 -D
                loader: 'url-loader',
                options:{
                    // 图片大小小于8kb，就会被base64处理
                    // 优点: 减少请求数量（减轻服务器压力）
                    // 缺点：图片体积会更大（文件请求速度更慢）
                    limit: 8 * 1024,
                    // 给图片重命名
                    // [hash:10]取图片的hash的前10位
                    // [ext]取文件原来扩展名
                    name:'[hash:10].[ext]'
                }
            },
            {
                test: /\.html$/,
                // 处理html文件中的Img图片（负责引入img，从而能被url-loader进行处理）
                // 指令：npm i html-loader -D
                loader:'html-loader'
            }
        ]
    },

打包其他资源

    module:{
        rules:[
            {
                test: /\.css$/,
                use:['style-loader','css-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                exclude:/\.(css|js|html|less)$/,
                loader: 'file-loader'
            }
        ]
    },