26.webpack 入门

Posted 2020-12-30 飞刀还问情

webpack

官方：

https://webpack.js.org/
http://webpack.github.io/

中文：

https://www.webpackjs.com/

资料：

https://segmentfault.com/a/1190000006178770

---

学习入口：

官网----->1 中文文档-->指南
?????2 立即开始
-------------------------------------------------------------

安装webpack:

1、3.x

安装 cnpm i -D [email protected]
卸载 npm un -D webpack

2、4.x

安装 cnpm i -D webpack webpack-cli

---

局部安装验证版本：

webpack -v 错误 —— 全局安装

1、node_modules/.bin/webpack -v
2、npx webpack -v
3、工程文件 package.json

"scripts": {
        "test": "webpack -v"
     },

运行npm run test

---

webpack3 翻译器 ES6-->ES5 babel

webpack src dist

npx webpack js/index.js dist/index.bundle.js

文件不会被压缩！

---

webpack4 翻译器 ES6-->ES5 babel

webpack --mode=development src -o dist 正确的格式

npx webpack --mode=development js/index.js dist/index.bundle.js --->main.js

npx webpack --mode=development js/index.js --output dist/index.bundle.js

文件会被压缩！

简写:webpack --mode=development

前提条件：
1、源src 必须是 src/index.js
???????输出： 默认 dist/main.js

-------------------------------------------------------------

配置文件：　webpack.config.js

执行：webpack

指定执行某一个具体的文件： 必须带上 --config

webpack --config webpack.dev.config.js

-------------------------------------------------------------

loader:处理资源 ==从右往左进行处理==

cnpm i -D style-loader css-loader

css-loader：加载css文件
style-loader：处理样式 页面生成style标签

sass:
cnpm i -D sass-loader node-sass

less:
cnpm i -D less-loader less
------------------------------------------------------

cnpm i -D url-loader file-loader

file-loader：处理文件 单纯的把文件复制到目标路径 重命名
url-loader 依赖 file-loader :把文件转成base64

exp:

module.exports = {
    mode:"development",
    entry:"./src/index.js", //引入模块 ./
    output:{ 
        path:`${__dirname}/dist/`,  //必须是一个绝对路径
        filename:"index.bundle.js"
    },
    module: {
        rules: [
            { 
                test: /.css$/, 
                use: [‘style-loader‘,‘css-loader‘] 
             },
             //sass
            { 
                test: /.scss$/, 
                use: [‘style-loader‘,‘css-loader‘,‘sass-loader‘] 
            },
            //less
            { 
                test: /.less$/, 
                use: [‘style-loader‘,‘css-loader‘,‘less-loader‘] 
            },
            {
                test: /.(png|jp(e)?g|gif)$/,
                use: ["url-loader"]
              }
        ]
    }
}

---

model:{ 模块、包
        rules:[ //规则
                {test:/正则/，use:[xxxx-loader]}  use:使用什么

loader进行处理
        ]
}

indes.js
import $ from "jquery";
import "./asset/1.css";
import img from "./asset/111.jpg"

$(function(){
    $("#div1").click(function(){
        //$(this).addClass("active");

        // alert(img);

        $(this).css({
            width:"330px",
            height:"495px",
            background:`url(${img})`
        });
    });
});

res:

---

生成页面 index.html

cnpm i -D html-webpack-plugin

new HtmlWebpackPlugin()

new HtmlWebpackPlugin({
    //title: ‘My App‘,
    template: ‘public/index.html‘,用户模板文件
    filename: ‘index.html‘,  生成的页面   可以不写  默认就是index.html
    hash:true  防止js/css缓存
})

ExtractTextWebpackPlugin 在 webpack4中被废弃 替换者 mini-css-extract-plugin

cnpm i -D mini-css-extract-plugin

mini-css-extract-plugin++应用场景只在开发阶段++！
++在生产阶段换成 style++

---

--watch 简写 -w 实时编译 问题 不能主动刷新页面

webpack-dev-server 服务器

不能实时编译，可以实时刷新页面

cnpm i -D webpack-dev-server

webpack.config.js

const webpack = require(‘webpack‘);
const path = require("path");
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

//  webpack --mode=development src/index.js  --output dist/main.js

module.exports = {
    mode:"development",
    entry:"./src/index.js",//模块 ./
    output:{
        path:path.resolve(__dirname,"dist"),//绝对路径
        filename:"main.js"
    },
    devServer: {
        contentBase: "./dist", //资源目录 www/public
        index: ‘main.js‘,
        host:"localhost",
        port:9000,
        open:true,// --open 
        hot: true,
        compress: true,  //gzip压缩
        // proxy: {
        //     ‘/api‘: {
        //     target: ‘https://other-server.example.com‘,
        //     secure: false
        //     }
        // }
    },
    module: {
        rules: [
            // { test: /.css$/, use: ["style-loader","css-loader"] },
            {
                test: /.css$/,
                use: [
                  MiniCssExtractPlugin.loader,
                  "css-loader"
                ]
            },
            { test: /.(png|jp(e)?g|gif|svg|icon)$/,use: ["file-loader"] },
        ]
    },
    plugins: [
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.BannerPlugin(‘版权所有，翻版必究‘),
        //new HtmlWebpackPlugin()
        new HtmlWebpackPlugin({
            template: ‘public/index.html‘,
            filename: ‘index.html‘,
            hash:true
        }),
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    


    ]

}

---

css/url/file/babel/vue-loader

css分离（mini-css-extract-plugin）
HtmlWebpackPlugin
HtmlWebpackPlugin —— Clean...

babel