阅读 187

从今天学习webpack-搞一个webpack脚手架(1)

初始化一个项目

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

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

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

创建文件

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

src目录下创建 index.htmlindex.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后  运行本地环境则会自动打开浏览器
    }
}
复制代码

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

文章分类
前端
文章标签