webpack学习

day1:

一、主体部分

ul>li{这是第$个li}*9 快速生产ul>li结构；cls清除cmd界面

⑦安装webpack：npm install webpack@5.42.1 webpack-cli@4.9.0 -D

⑧新建webpack.config.json:

module.exports={
    mode:'development' //development和production
}

⑨修改package.json：

"scripts": {
    "dev": "webpack"
  },

⑽运行npm run dev 启动webpack

⑾修改index.html里面的js为../dist/main.js

二、插件

⑴安装webpack-dev-server插件实时监控代码改动，html引用的js应改成/index.js，使用localhost:8080访问网页：

npm install webpack-dev-server@3.11.2 -D 然后修改package.json

​
"scripts": {
    "dev": "webpack serve"
  },

​

⑵修改localhost:8080首页，安装html-webpack-plugin插件：

npm install html-webpack-plugin@5.3.2 -D
⑶修改webpack.config.json:/

/导入html-webpack-plugin插件，得到插件的构造函数

const HtmlPlugin = require("html-webpack-plugin");

//new构造函数，创建插件的实例对象

const htmlPlugin = new HtmlPlugin({

    //指定原文件的存放路径

    template: "./src/index.html",

    //指定生成的文件的存放路径

    filename: "./index.html",

})
module.exports={
    mode: 'development', //development和production
    //指定要处理的js文件,默认index.js
    entry: path.join(__dirname,"./src/index.js"),
    output:{
        //存在的目录,默认dist
        path:path.join(__dirname,'dist'),
        //生成的文件名
        filename: "bundle.js"
    },
    plugins:[htmlPlugin]
}

一个是添加插件的构造函数和实例对象，一个是在module加入该实例对象。

⑷index中添加Index.css,webpack是无法识别的，提示缺少loader

//使用ES6模块化方式导入jquery
import $ from 'jquery'

//导入样式
import "./css/index.css"

这就需要安装css的加载器(loader)：npm i style-loader@3.0.0 css-loader@5.2.6 -D；在webpack.config.js的module.export代码段中添加module -> rules数组，数组中添加loader规则

module: {
        //所有第三方文件模块的匹配规则
        rules: [
            //定义后缀名的匹配规则
            {test: /\.css$/,use:["style-loader","css-loader"]}
        ]
    }

其中webpack把indexindex.css这个文件，先转交给最后个loader进行处理(先转交给css-loader)，最后webpack会把处理结果合并到bundle.js中，生成打包好的文件。

less打包loader：npm i less-loader@10.0.1 less@4.1.1 -D，同样修改rules数组

module: {
        //所有第三方文件模块的匹配规则
        rules: [
            //定义后缀名的匹配规则
            {test: /\.css$/,use:["style-loader","css-loader"]},
            {test: /\.less$/,use:["style-loader","css-loader","less-loader"]}
        ]
    }

⑸小图片适合转换成base64格式，降低网络请求。

 inde.js中添加

//1. 导入图片
import logo from "./images/logo.png"
//2. 给img的src标签动态赋值
$(".box").attr("src",logo);

⑹高级js语法需要用到bable-loader加载器

 在项目根目录需要添加一个bable的配置js

/官网地址：https://babeljs.io/docs/en/babel-plugin-proposal-decorators

module.exports = {
  //生命bable可用插件
  //将来webpack在调用bable-loader的时候，会先加载plugins插件来使用
  plugins: [
    ["@babel/plugin-proposal-decorators", { "legacy": true }]]
}

⑺build打包发布到硬盘，在package.json配置：

"scripts": {
    "dev": "webpack serve", //开发环境使用dev
    "build": "webpack --mode production" //项目发布使用build
  },

⑻为了每次打包发布自动清除dist目录里面的旧文件，需要安装clean-webpack-plugin

命令：npm install --save-dev clean-webpack-plugin，使用可参考npm官网。

⑼为解决souce map问题，保证运行时报错的行数与源代码的行数保持一致，需要在webpack.config.js加入devtool:"eval-source-map"

 mode: 'development', //development和production
    //开发阶段都设置为eval-source-map
    devtool:"eval-source-map",

在实际发布的时候，把devtool 设置为nosources- source -map或直接关闭SourceMap

⑽别名，建议webpack，@符号表示src这一层目录，在webpack.config.json中添加

resolve:{
        alias:{
            //告诉webpack，@符号表示src这一层目录
            "@":path.join(__dirname,"/src/")
        }
    }