初始化一个项目

创建一个文件夹 命名为 webpackCli
cd webpackCli

运行命令 npm init -y // 初始化项目地址 生成package.json文件

屏幕快照 2021-08-08 下午5.58.38.png

创建文件

我们在根目录下新建文件夹 src

在src目录下创建 index.html、index.js文件

index.html

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div id="id">just dance 521</div>
    </body>
    <script src="./index.js"></script>
</html>

index.js

const dom = document.getElementById('app')

if (dom) {
    dom.innerHTML = 'just do it 521'
}

此时我们只是搭建了项目，虽然非常简单。为了创建一个可以热更新、可以在本地环境开发运行的脚手架，我们需要引入 webpack相关的插件

安装 webpack相关插件

安装webpack 和 webpack-cli 和 webpack-dev-server

npm i -D webpack webpack-cli webpack-dev-server

接下来在根目录创建webpack.config.js 作为webpack的配置文件。(当然这里只是简单先配置)

屏幕快照 2021-08-08 下午6.25.00.png

webpack.config.js 配置

const path = require('path')

module.exports = {
    entry: './src/index.js', //  入口文件
    output: {
        path: path.resolve(__dirname, './dist'),  // 打包后文件位置
        filename: 'index.js',  // 打包后文件名称
    },
    module: {},
    plugins: [],
    devServer: {  //  本地服务配置
        port: 3609,  // 端口 
        open: true, // 是否自动打开   设置为true后  运行本地环境则会自动打开浏览器
    }
}

为了启动本地服务，我们在pakckage.json中需要配置一下启动命令

{
  "name": "webpackCli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "serve": "webpack-dev-server"  //  启动webpack-dev-server
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.49.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  }
}

此时我们可以在命令行启动一下试试 npm run serve

此时可能会在控制台报如下错误

lishangdeMacBook-Pro:webpackCli lishang$ npm run serve

> webpackCli@1.0.0 serve /Users/lishang/Desktop/dailyPractice/webpackCli
> webpack-dev-server

module.js:550
    throw err;
    ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
    at Function.Module._resolveFilename (module.js:548:15)
    at Function.Module._load (module.js:475:25)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/lishang/Desktop/dailyPractice/webpackCli/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webpackCli@1.0.0 serve: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the webpackCli@1.0.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/lishang/.npm/_logs/2021-08-08T10_30_24_291Z-debug.log
lishangdeMacBook-Pro:webpackCli lishang$

这是因为我们的webpack 和 webpack-dev-server的版本之间有冲突。因此我们需要安装对应的版本

npm i -D webpack@4.35.3 webpack-cli@3.3.6 webpack-dev-server@3.11.0

接下来我们运行npm run serve 就可以在浏览器打开但是这时候我们可能看到的页面表现和我们想的不一致

屏幕快照 2021-08-08 下午7.04.35.png

这时候我们可以因为插件 html-webpack-plugin clean-webpack-plugin。这里注意引入的 html-webpack-plugin 的版本要和webpack的版本一致。我们上一步用的是 webpack4的版本，那么 html-webpack-plugin的版本也要一致

npm i -D  html-webpack-plugin@4.5.2
npm - -D clean-webpack-plugin

这时候webpack.config.js 配置需要修改一下

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin }= require('clean-webpack-plugin');

module.exports = {
    entry: './src/index.js', //  入口文件
    output: {
        path: path.resolve(__dirname, './dist'),  // 打包后文件位置
        filename: 'index.js',  // 打包后文件名称
    },
    module: {},
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html', // 模板的配置文件入口
        }),
        new CleanWebpackPlugin(),  // 清理 dist里面的文件 
    ],
    devServer: {  //  本地服务配置
        port: 3609,  // 端口 
        open: true, // 是否自动打开   设置为true后  运行本地环境则会自动打开浏览器
    }
}

此时当我们启动项目就可以看到我们想看到的了，这时候也能正常的热更新啦。

从今天学习webpack-搞一个webpack脚手架（1）

初始化一个项目

创建文件

安装 webpack相关插件