关于webpack: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
                   }
                ]
            },
        ]
    }
}