项目构建工具

【开发笔记】webpack 脚手架构建

微信扫一扫,分享到朋友圈

【开发笔记】webpack 脚手架构建
收藏 0 0

1、项目初始化

初始化生成 package.json 文件

npm init 

2、安装 webpack 依赖

默认安装最新版本

npm install --save-dev webpack

安装指定版本

npm install --save-dev webpack@<version>

如果是4以上版本,还需要安装CLI

npm install --save-dev webpack-cli

如果不知道具体版本,可访问以下网址查看历史版本

https://www.npmjs.com/package

3、创建基础项目结构

webpack-demo
|- package.json
|- index.html
|- /src
    |- index.js

4、设置 webpack.config.js

// webpack.config.js
const path = require('path');
module.exports = {
    entry: './src/index.js',    // 入口文件
    output: {
        filename: 'bundle.js',      // 打包后的文件名称
        path: path.resolve('dist')  // 打包后的目录,必须是绝对路径
    }
}

5、配置执行命令

// package.json
"scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server"
},

6、安装HTML模板插件

npm i html-webpack-plugin -D

7、配置HTML模板

let path = require('path');
// 插件都是一个类,所以我们命名的时候尽量用大写开头
let HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        // 添加hash可以防止文件缓存,每次都会生成4位的hash串
        filename: 'bundle.js',   
        path: path.resolve('dist')
    },
    plugins: [
        // 通过new一下这个类来使用插件
        new HtmlWebpackPlugin({
            // 用哪个html作为模板
            // 在src目录下创建一个index.html页面当做模板来用
            template: './src/index.html',
            hash: true, // 会在打包好的bundle.js后面加上hash串
        })
    ]
}
为自己努力,为亲人拼搏,为幸福奋斗。
上一篇

【Spring】第03篇 Spring 环境配置

下一篇

【Java系列】第01篇 Java 简介

你也可能喜欢

发表评论

插入图片

分类目录

微信扫一扫

微信扫一扫