webpack配置项目并启用静态服务运行项目

demo仓库地址

1. 新建一个js文件

2. npm init -y 初始化建立package.json文件

3. 安装webpack和webpack-cli

yarn add webpack -D

yarn add webpack-cli -D

4. 新建webpack.config.js文件， 并开始填写以下内容

引入node模块path

const path = require('path')

声明入口文件(单页面应用)

指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的

entry: './src/index.js',

声明出口文件

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。

output: {
    path: path.resolve(__dirname, 'dist'), // 输出的文件路径
    filename: 'bundle.js', // 输出的文件名
  },

loader

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。

module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: 'css-loader',
          fallback: 'style-loader',
        }),
      },
  },

插件(plugins)

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。

const UglifyPlugin = require('uglifyjs-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

// 引用需要先使用yarn add 添加， 如 yarn add html-webpack-plugin -D

plugins: [
    new UglifyPlugin(), // 压缩代码
    new ExtractTextPlugin('index.css'), // 输出css文件
    new HtmlWebpackPlugin({ // 配置html文件
      filename: 'index.html', // 配置输出文件名和路径
      template: 'assets/index.html', // 配置文件模板
    }),
  ],

将以上内容除了引入声明， 其余代码全部放入module.exports对象中暴露出去。

const path = require('path')
const UglifyPlugin = require('uglifyjs-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'), // 输出的文件路径
    filename: 'bundle.js', // 输出的文件名
    // path: __dirname + '/dist/[hash]',
  },
  module: {
  // 规则里面使用到的这类依赖(css-loader,style-loader等)也需要用yarn add, 不过不需要手动引入
    rules: [
      { // css规则
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: 'css-loader',
          fallback: 'style-loader',
        }),
      },
      { // 图片处理规则
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {},
          }
        ]
      },
      { // js、jsx文件处理规则
        test: /\.jsx?/, // 支持js和jsx
        include: [
          path.resolve(__dirname, 'src'), // src目录下的才需要经过Babel处理
        ]
      }
    ]
  },
  // watch: true   // 监听修改自动打包
  plugins: [
    new UglifyPlugin(), // 压缩代码
    new ExtractTextPlugin('index.css'), // 输出css文件
    new HtmlWebpackPlugin({ // 配置html文件
      filename: 'index.html', // 配置输出文件名和路径
      template: 'assets/index.html', // 配置文件模板
    }),
  ],
}

启动静态服务

webpack简单配置已完成，可以使用 webpack-dev-server 在本地开启一个简单的静态服务来进行开发。

在项目下安装 webpack-dev-server(yarn add webpack-dev-server)，然后添加启动命令到 package.json 中

"scripts": {
  "build": "webpack --mode production",
  "start": "webpack-dev-server --mode development"
}

可以指定端口、热更新、运行完成时自动打开

"dev": "webpack-dev-server --hot --port 3000 --open"

使用yarn dev命令运行