webpack入门

1. npm init -y 生成packge.json。
2. npm i webpack webpack-cli -D，这时候可以npx webpack打包。
3. packge.json文件script中加入

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

新建webpack.config.js

const path = require("path");   // webpack内部方法path组件
module.exports = {
    entry: "./main.js", // 入口文件指定
    output: {
        //出口文件配置 配置出口打包路径
    filename: "index.js", //打包后的文件名称
    path: path.resolve(__dirname, "dist") //resolve绝对路径引入
 }
};

配置完这2个文件就可以直接 npm run dev打包了
4.打包时自动生成index.html
npm i -D html-webpack-plugin
webpack.config.js中加入

// index.html生成插件
const HtmlWebPackPlugin = require("html-webpack-plugin");  

module.exports = {
    plugins: [
        new HtmlWebPackPlugin({
            filename: "index.html", // 生成打包文件名
             template: "./index.html", // 模板路径
             minify: { //生产模式可以进行配置
                 removeAttributeQuotes: true, //删除 html文件双引号
                 collapseWhitespace: true //折叠控行
             },
            hash:true, //添加哈希值~~~~
         })
    ],
}

5.css模块，css以行内的方式插入到head中
npm i -D --save css-loader style-loader
webpack.config.js中加入

module.exports = {
    module: {
        rules: [
          {
            test: /.css$/,
            use: ["style-loader", "css-loader"] // 执行顺序右->左,下->上
          }
        ]
    }
}

6.css抽离,css以link标签方式插入到head里
npm i -D --save mini-css-extract-plugin

const MinCssExtractPlugin = require("mini-css-extract-plugin"); // css抽离插件

module.exports = {
    plugins: [
        new MinCssExtractPlugin({
            filename: "index.css",
        })
    ],
    module: {
        rules: [
          {
            test: /.css$/,
            use: [
                MinCssExtractPlugin.loader, 
                "css-loader"
            ] // 执行顺序右->左,下->上
          }
        ]
    }
}

7.打包图片
css背景图
npm i -D url-loader
webpack.config.js中加入

module.exports = {
    module: {
        rules: [
            {
                test: /.(png|svg|jpg|gif)$/,
                use: [
                   loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]',
                ]
            },
        ]
    }
}

js
main.js中加入

import vue from './src/img/vue.png'

window.onload = function(){
    var root = document.getElementById('root');
    var image = new Image();    // 创建img标签
     image.src = vue;           // 将img的src属性设置成我们引入的图片
     root.append(image);
}

html
npm i -D html-withimg-loader
webpack.config.js中加入

module.exports = {
    module: {
        rules: [
            {
                test: /.(html|htm)$/i,
                use: ['html-withimg-loader'] // 解析html中的图片资源
            },
            {
                test: /.(png|svg|jpg|gif)$/,
                use: [
                   loader: 'url-loader,
                   options: {
                        esModule: false
                   }
                ]
            },
        ]
    }
}