使用 webpack-dev-server 搭建开发环境

最新推荐文章于 2024-08-10 22:58:28 发布

小豪boy

最新推荐文章于 2024-08-10 22:58:28 发布

阅读量395

点赞数

分类专栏： Webpack的应用文章标签： node.js javascript css

本文链接：https://blog.csdn.net/qq_34771938/article/details/120559733

版权

Webpack的应用专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一. 实现 webpack 项目初始化及相关包和插件的安装

可以参考：

初识 Webpack_小豪boy的博客-CSDN博客一、Webpack是什么webpack是静态模块打包器，当webpack处理应用程序时，会将所有这些模块打包成一个或多个文件。webpack可以处理的模块包括js/css/图片、图标字体等单位。静态：开发过程中存在于本地的js/css/图片/图标字体等文件，就是静态的。动态的内容，webpack没办法处理，只能处理静态的。官网：webpack 中文文档 | webpack 中文网。二、Webpack初体验1.初始化项目①...https://blog.csdn.net/qq_34771938/article/details/120535378?spm=1001.2014.3001.5501
Webpack 的 4 个核心概念_小豪boy的博客-CSDN博客一、准备工作1.根据已有的 package.json 文件安装需要的包。2. 打开命令行工具，输入命令： npm install3. 安装完成后，项目文件夹中会多出一个 node_modules 文件夹，用于存放安装的包。二、entry官方文档：入口起点(entry points) | webpack 中文网入口起点(entry point)指示 webpack 应该使用哪个模块，来作为打包的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口https://blog.csdn.net/qq_34771938/article/details/120541191?spm=1001.2014.3001.5501

安装完成后 package.json 包含以下依赖：

npm install --save-dev webpack@4.44.1 webpack-cli@3.3.12 html-webpack-plugin@4.3.0 css-loader@4.1.1 mini-css-extract-plugin@0.9.0

2. 安装 webpack-dev-server

webpack-dev-server 文档：开发环境 | webpack 中文文档。
webpack-dev-server 为你提供了一个基本的 web server，并且具有 live reloading(实时重新加载) 功能。
webpack-dev-server 在编译之后不会写入到任何输出文件，而是将输出文件保留在内存中。
安装命令：npm install --save-dev webpack-dev-server@3.11.0
安装完成后，配置 webpack.config.js 文件。
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../'
            }
          },
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css'
    })
  ]
};
添加一个可以直接运行 dev server 的 script

package.json

运行命令：npm run dev

可以让我们更改的内容，实时显示在浏览器中。