webpack

郭欠
83 阅读4分钟

webpack




// 创建项目文件夹
mkdir webpack-demo



// 进入文件夹
cd webpack-demo



// 创建package.json包描述性文件
npm init -y



// 安装webpack开发依赖包，注意：1是开发依赖包-D，2是包的版本号锁定
npm i -D webpack@5.74.0 webpack-cli@4.10.0



// 创建webpack.config.js配置文件，内容如下：
module.exports = {}



// 创建src文件夹
mkdir src



// 创建src/main.js入口文件，内容如下：
console.log("start...");



// 使用vscode编辑器打开webpack-demo项目文件夹
code .



// 修改webpack的配置文件webpack.config.js的内容如下：
// ===============================================start...
const { resolve } = require('path')

module.exports = {
    mode: "development",
    entry: resolve(__dirname, 'src/main.js'),
    output: {
        path: resolve(__dirname, 'dist'),
        filename: '[name].bundle.[hash:8].js'
    }
} 
// ===============================================end...



// 执行npx webpack命令进行打包
// webpack会读取配置文件webpack.config.js的内容
// 将entry配置的文件作为入口文件进入打包，打包完成后输出到output配置的文件中
npx webpack



// 配置npx webpack命令的替代命令
// 添加script命令：修改package.json文件中的scripts属性，内容如下：
// ===============================================start...
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack"
},
// ===============================================end...



// 使用npm run dev命令替代npx webpack命令进行打包操作
npm run dev



// 修改一下src/main.js的内容如下：
// ===============================================start...
console.log('start...') 
console.log('end...') 
// ===============================================end...



// 再执行npm run dev命令进行打包操作
npm run dev

clean-webpack-plugin


// 这时候会发现dist文件夹下会多一个js文件
// 这是因为src/main.js的内容改变，文件的hash值也跟着改变，生成的文件名也随之改变
// 之前生成的文件应该要删除清理掉，只留下最新生成的文件，
// 需要安装webpack插件：clean-webpack-plugin，并进行配置



// 安装clean-webpack-plugin插件为开发依赖，版本号为4.0.0
npm i -D clean-webpack-plugin@4.0.0


// 修改webpack配置文件webpack.config.js文件的内容如下：
// ===============================================start...
const { resolve } = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 导入插件

module.exports = {
    mode: "development",
    entry: resolve(__dirname, 'src/main.js'),
    output: {
        path: resolve(__dirname, 'dist'),
        filename: '[name].bundle.[hash:8].js'
    },
    plugins: [
        new CleanWebpackPlugin() // 配置插件
    ]
} 
// ===============================================end...



// 再次执行npm run dev命令进行打包，会发现打包成功后dist文件夹下只有一个js文件
npm run dev


// 在项目根目录下创建index.html文件，内容如下：
// ===============================================start...
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    hello,world~

    <script src="./dist/bundle.js"></script>
</body>
</html>
// ===============================================end...



// 修改webpack的配置文件webpack.config.js内容如下：
// ===============================================start...
const { resolve } = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    mode: "development",
    entry: resolve(__dirname, 'src/main.js'),
    output: {
        path: resolve(__dirname, 'dist'),
        filename: 'bundle.js' // 修改的内容在这里
    },
    plugins: [
        new CleanWebpackPlugin()
    ]
} 
// ===============================================end...



// 再次执行npm run dev命令进行打包
npm run dev



// 浏览器打开index.html文件，并打开控制台，可以看到输出的内容

html-webpack-plugin


// 安装html-webpack-plugin插件：自动生成打包后的html文件，注意：1是开发依赖-D，2是包版本号锁定
npm i -D html-webpack-plugin@5.5.0



// 配置webpack.config.js文件内容如下：
// ===============================================start...
const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 导入插件

module.exports = {
  mode: "development",
  entry: resolve(__dirname, "src/main.js"),
  output: {
    path: resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin(), // 使用插件
  ],
};
// ===============================================end...



// 再次执行npm run dev命令进行打包，可以看到dist文件夹下有2个文件：分别是index.html和bundle.js
npm run dev



// html-webpack-plugin插件可以自定义html模板
// ===============================================start...
const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  mode: "development",
  entry: resolve(__dirname, "src/main.js"),
  output: {
    path: resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({template: resolve(__dirname, 'index.html')}), // 改动在这里
  ],
};
// ===============================================end...

webpack-dev-server

// 开发服务器：webpack-dev-server，注意：1是开发依赖，2是版本号
npm i -D webpack-dev-server@4.10.1



// 直接使用npx webpack-dev-server命令
npx webpack serve
npx webpack-dev-server
npx webpack-dev-server --open
npx webpack-dev-server --progress
npx webpack-dev-server --open --progress



// 把webpack-dev-server的配置写入webpack.config.js配置文件：
// ===============================================start...
const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  mode: "development",
  entry: resolve(__dirname, "src/main.js"),
  output: {
    path: resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  devServer: { // 这里
    open: true,
    port: 8088,
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({template: resolve(__dirname, 'index.html')}),
  ],
};
// ===============================================end...



// 执行如下命令启动服务器：
npx webpack serve
npx webpack serve --progress
npx wepack-dev-server
npx wepack-dev-server --progress



// 使用npm run serve替代npx webpack serve命令
// 修改package.json中的scripts属性
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack",
    "serve": "webpack serve --progress" // 新增一行
},



// 修改main.js的内容如下：
import { hello } from './hello'
hello()



// 新建src/hello.js文件，内容如下：
export const hello = ()=>{
    console.log('hello...')
}



// 可以看到控制台输出了：hello...



// 修改main.js的内容如下：
import Person from './hello'
const p = new Person('莉莉')
p.sayHello()



// 修改src/hello.js文件，内容如下：
export default class Person {
    constructor(name){
        this.name = name
    }
    sayHello(){
        console.log(this.name + ' say: ' + 'hello......')
    }
}



// 可以看到控制台输出了：莉莉 say: hello......

sass&sass-loader

// 新建src/style.scss文件，内容如下：
body{
    background-color: red;
}



// 在main.js顶部引入
import './style.scss'
import Person from './hello'
const p = new Person('莉莉')
p.sayHello()



// 发现报错，解决方式，安装loader：sass-loader+node-sass、css-loader、style-loader
npm i -D style-loader@3.3.1 css-loader@6.7.1 sass-loader@13.0.2 node-sass@7.0.1



// 配置webpack，引入module.rules：loader
// ===============================================start...
const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  mode: "development",
  entry: resolve(__dirname, "src/main.js"),
  output: {
    path: resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  module: { // 新增module属性
    rules: [
        {
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader']
        }
    ]
  },
  devServer: {
    open: true,
    port: 8088,
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({template: resolve(__dirname, 'index.html')}),
  ],
};
// ===============================================end...



// 重新启动服务器，可以看到没有报错了，页面背景也变成了红色
npm run serve

eslint&prettier


// 项目中安装eslint包
npm i -D eslint@8.23.0



// 创建配置文件
npm init @eslint/config



// 检测语法是否符合eslint规范
npx eslint src/main.js



// 修复不符合eslint规范的语法（只能修复部分：单双引号、结尾分号）
npx eslint src/main.js --fix



// 注意：
// 只有使用npx eslint src/main.js命令时才能看到不符合规范的语法，不太合适，想要实时查代码是否符合规范
// 因此vscode提供了插件，在书写代码时可以实时显示不符合规范的语法



// 在vscode编辑器的插件管理中安装eslint插件
// 保存时自动修复fix部分语法，配置如下
"editor.codeActionsOnSave": {
    "source.fixAll": true
},



// 上面的配置只是会在ctrl+s保存时修复：结尾自动加分号、单双引号等，不能格式化代码
// 保存时自动格式化代码需要下面配置：
"editor.formatOnSave": true,



// 自动格式化：输入分号结束时或者键入enter换行时
"editor.formatOnType": true,



// 因此
"editor.formatOnType": true,
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
    "source.fixAll": true
},


// 项目安装prettier插件
npm i -D prettier



// 创建配置文件.prettier.js，内容如下
module.exports = {
    tabWidth: 4,
    useTabs: false, //使用空格代替tab缩进
    semi: false, // 结尾不加分号
    singleQuote: true, // 字符串使用单引号
}



// vscode配置，formatOnSave会自动格式化
"editor.formatOnSave": true,

typescript



// 在项目中使用typescript时需要的配置



// 安装开发依赖：typescript和ts-loader
npm i -D ts-loader@9.4.1 typescript@4.8.3



// 配置webpack.config.js的module.rules，配置ts-loader
// ===============================================start...
const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  mode: "development",
  entry: resolve(__dirname, "src/main.js"),
  output: {
    path: resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  module: {
    // 新增module属性
    rules: [
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.ts$/,
        use: "ts-loader",
      },
    ],
  },
  devServer: {
    open: true,
    port: 8088,
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({ template: resolve(__dirname, "index.html") }),
  ],
};
// ===============================================end...



// 在src目录下创建Application.ts文件，内容如下：
// ===============================================start...
export default class Application {
  private _name: string;
  constructor(name) {
    this._name = name;
    this.start();
  }

  start() {
    console.log("........", this._name);
  }
}
// ===============================================end...



// 在main.js中引入并使用：
import Application from "./Application";
new Application("kk");



// 上一步会报错，找不到./Application，是因为没有加.ts后缀，加上后缀可以修复报错，
// 如果不想加后缀，可以配置webpack.config.js的resolve.extensions属性
resolve: {
    extensions: [".js", ".ts", ".json"],
},



// vue等框架可以使用@替代路径src，也是在webpack.config.js中的resolve属性中配置，配置如下：
resolve: {
    alias: {
        "@": path.resolve(__dirname, "./src")
    }
},



// typescript的使用：下载typescript及ts-loader插件，然后配置ts-loader即可

分离css样式文件


// 安装依赖：mini-css-extract-plugin
npm i -D mini-css-extract-plugin@2.6.1
// webpack4之前使用extract-text-webpack-plugin插件


// webpack配置
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
module: {
    rules: [
        {
            test: /\.scss$/,
            use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
        }
    ]
},
plugins: [
    new MiniCssExtractPlugin()
]

source-map

// https://v4.webpack.docschina.org/configuration/devtool/

none
eval
eval-source-map
cheap-eval-source-map
cheap-module-eval-source-map

cheap-source-map
cheap-module-source-map
inline-cheap-source-map
inline-cheap-module-source-map

source-map
inline-source-map
hidden-source-map
nosources-source-map

git-hooks 与 husky


// 安装husky
npm i -D husky



// package.json的scripts配置
"scripts": {
    "prepare": "husky install",
    "lint": "eslint src"
},



// 添加pre-commmit
npx husky add .husky/pre-commit "npm run lint"
avatar
文章
阅读
粉丝