webpack学习笔记

1.webpack基础概念

首先，创立一个名为index.js 的文件，作为 webpack入口起点文件。

1. 运行指令

开发环境指令： 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

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

结论：1.webpack能处理js/json资源,不能处理css/img等其他资源

2.生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化~

3.生产环境比开发环境多个压缩js代码。

2.打包样式资源

首先，在项目下创建文件webpack. config.js 作为webpack的配置文件。
作用:当你运行webpack 指令时，会加载里面的配置。

所有构建工具都是基于nodejs运行的模块化默认采用commonjs。

// resolve用来拼接绝对路径的方法
const {resolve}= require('path');
module.exports = {
    //webpack配置
    //入口起点
    entry:'./src/index.js',
    //输出
    output:{
        //输出文件名
        filename:'built.js',
        //输出路径
        //_dirname nodejs的变量，代表当前文件的目求绝对路径
        path: resolve(__dirname ,'build' )
    },
    module:{
        rules:[
            //不同文件必须配置不同loader来处理
            {
                //匹配哪些文件
                test: /\.css$/,
                //使用哪些loader进行处理
                use:[
                    //use数组中loader执行顺序：从右到左，从下到上,依次执行
                    // 创建style标签，将js中的样式资源插入进行，添加到head中生效
                    'style-loader',
                    //将css文件变成commonjs模块加载js中,里面内容是样式字符串
                    'css-loader'
                ]
            },
            {
                test:/\.less$/,
                use:[
                    'style-loader',
                    'css-loader',
                    //需要下载less-loader和less，将less文件编译成css文件
                    'less-loader'
                ]
            }
        ]
    },
    // plugins的配置
    plugins:[],
    //模式   即开发模式还是生产模式
    mode: 'development',
    // mode:'production'
}

3.打包html资源

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports ={
    entry: ' ./src/index.js' ,
    output:{
        filename: ' built.js',
        path: resolve(__dirnamem, 'build')
    },
    module: {
        rules: [
        // loader的配置
        ],
        plugins: [
        // plugins的配置
        //html-webpack-plugin
        //功能：默认会创建一个空的html文件，引入打包输出的所有资源（js/css）
        // 需要有结构的html文件
        new HtmlWebpackPlugin({
            //复制 './src/index.html'文件 ，并自动打包输出所有资源（js/css）
            template: './src/index.html'
        })
        ],
        mode: 'development'
    }
}

4.打包图片资源

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry:'./src/index.js',
    output:{
        filename:built.js,
        path:resolve(_dirname,'build')
    },
    module:{
        rules:[
            {
                test: /\.1ess$/,
                //要使用多个loader处理use
                use:['style-loader','css-loader','less-loader']
            },
            {
                //问题：处理不了html中的img图片
                //处理图片资源
                test:/\.(jpg|png|gif)$/,
                //使用一个loader
                //下载url-loader file-loader
                loader:'url-loader',
                options:{
                    //图片大小小于8kb,就会被base64处理
                    //优点：减少请求数量（减轻服务器压力）
                    //缺点：图片体积会更大（文件请求速度更慢一点）
                    limit: 8*1024,
                    // 问题:因为url-loader默认使用es6模块化解析，而html- loader引入图片是commonjs
                    // 解析时会出问题: [object Module]
                    //解决:关闭url-loader的es6模块化， 使用commonjs解析
                    esModule:false,
                    //给图片进行重命名
                    // [hash:10]取图片的hash的前10位
                    // [ext]取文件原来扩展名
                    name : '[hash:10].[ext]'

                }
            },
            {
                test:/\.html$/,
                //处理HTML文件的img图片（负责引入img）
                loader:'html-loader'
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ]
}