【webpack】配置一个有热更新的基础的webpack项目

最新推荐文章于 2024-08-20 09:29:00 发布

墨霁青玉

最新推荐文章于 2024-08-20 09:29:00 发布

阅读量3.6k

点赞数

分类专栏： Webpack

本文链接：https://blog.csdn.net/qq_30604453/article/details/80915276

版权

Webpack 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.搭建基础的结构框架

新建项目文件夹 myapp

在myapp根目录下初始化 npm init --yes

在myapp根目录下新建dist文件夹（用于存放编译好的东西），新建src文件夹（用于存放源代码）

2.安装webpack依赖

在myapp根目录下： npm install webpack webpack-cli webpack-dev-server --save-dev

3.构建基础代码结构

在myapp根目录下新建index.html（这是项目的入口html文件），引入bundle.js（这是编译好的代码文件，自动生成，无需创建）

如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>myapp</title>
  </head>
  <body>
    
  </body>
  <script src="bundle.js" charset="utf-8"></script>
</html>

在src目录下新建index.js文件，这是项目的入口文件，根据需要编写。本次测试，index.js内容如下

document.write("hello!This is webpack with HMR!");

4.配置webpack.config.js文件

在myapp根目录下新建webpack.config.js文件。webpack配置参数有五大要素：entry，output，module，plugins，mode

entry：项目的入口文件

output：编译好的输出文件

module：定义编译规则，哪种类型的文件对应用哪个loader

plugins：webpack插件

mode：模式，有两个值分别是 "production" 和"development"

这次只用到entry，output，mode。还需追加devServer参数配置，因为需要项目运行在本地服务器上，采用基于express框架的webpack-dev-server，为达到热更新的效果，需要配置hot参数。

const path = require("path");
module.exports = {
  entry:"./src/index.js",
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  mode: 'production',
  devServer:{
    hot:true,
    inline:true
  }
};

5.配置运行脚本package.json

在package.json文件中找到 "script"键，在里面追加编译脚本"server": "webpack-dev-server --mode production --inline --hot"，如下

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "server": "webpack-dev-server --mode production --inline --hot"
  },

6.运行npm run server

在localhost:8080可以看到如下。在index.js文件下修改对应的数据，保存，页面自动更新。

// 续更

babel从babel6升级到了babel7，webpack3也升级到了webpack4

还是按照之前的配置肯定就出错了。看一下最新的babel7的配置

这是项目结构

国际惯例先安装 webpack webpack-cli webpack-dev-server

npm install --save-dev webpack webpack-cli webpack-dev-server

再安装几个重要的loader：babel-loader style-loader css-loader less-loader

npm install --save-dev babel-loader style-loader css-loader less-loader

看看webpack官方文档对loader的定义：loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

所以loader的作用就是在我们加载文件时，可以使用对应的loader“翻译”源代码，翻译成浏览器可以理解的代码

babel-loader用于处理js文件

style-loader用于处理<style>...</style>

css-loader用于处理css文件

less-loader用于处理less文件

接下来就是babel7的变化了。之前babel6是核心模块时babel-core，es6编译模块是babel-preset-es2015.

但是到了babel7这里全都变啦！！！ babel-core变为 @babel/core，babel-preset-es2015升级为套餐系列 @babel/preset-env

所以安装 @babel/core @babel/preset-env

最后package.json如下

{
  "name": "es-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "server": "webpack-dev-server --mode production --inline --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/preset-env": "^7.3.1",
    "babel-loader": "^8.0.5",
    "clean-webpack-plugin": "^1.0.1",
    "css-loader": "^2.1.0",
    "html-webpack-plugin": "^3.2.0",
    "less-loader": "^4.1.0",
    "path": "^0.12.7",
    "raw-loader": "^1.0.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  },
  "dependencies": {
    "@babel/polyfill": "^7.2.5",
    "es2015": "0.0.0",
    "less": "^3.9.0"
  }
}

webpack.config.js 如下

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack') //访问内置的插件
const CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {
  mode: 'production',
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname,'dist'),
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist',
    hot: true,
    inline:true
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },
      {
        test: /\.less$/,
        loaders: ["style-loader", "css-loader", "less-loader"],
        include: path.resolve(__dirname, 'src/css')
      },
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
      },
      {
        test: /\.(htm|html)$/,
        use: 'raw-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
      inject: 'body'
    }),
    new CleanWebpackPlugin(['dist']),
    new webpack.HotModuleReplacementPlugin()
  ],
  optimization: {
    minimize: true
  }
}

.babelrc

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage",
      "modules": false
    }]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime", {
        "corejs": false,
        "helpers": false,
        "regenerator": false,
        "useESModules": false
      }
    ]
  ],
  "comments": false
}