从0开始配置一个webpack项目

进思
98 阅读3分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第9天，点击查看活动详情

从0开始配置一个webpack项目

初始化项目

  • 新建一个文件夹并进入到文件夹中

    mkdir webpackproject
cd webpackproject

  • 初始化项目（package.json）文件

    # 使用输入配置方式
npm init 
# 按照终端提示输入项目名称，版本号等

# 使用默认配置

npm init -y

# 使用默认配置时输出的文件内容

{
  "name": "learnwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"

安装依赖

  • 安装webpack、webpack-cli 
    yarn add webpack@4.44.2 webpack-cli@3.3.12 -D

# 也可以使用npm
npm install webpack@4.44.2 webpack-cli@3.3.12 -D

添加内容

  • 在根目录下创建src文件夹，src下创建index.js
  • 在index.js中添加一些内容 
    console.log('hellow webpack')
  • 在package.json文件中的scripts字段中添加“start":"webpack" 
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack"
  }
  • 此时webpack已经可以打包了，自命令行中执行yarn start，项目会编译成功。webpack在根目录下创建了一个dist文件夹和dist文件夹中的main.js文件 注意：此时在控制台中出现的警告是因为没有配置mode，只要在webpack中配置mode字段即可消除警告
  • 在我们打包时，并没有写任何配置，但是打包内容出现在了dist文件夹中，这是webpack4的零配置使用功能，实际上是webpack已经帮用户做好了简单的打包配置。 
    const path = require('path')
module.exports = {
  extry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, './dist')
  }
}

由此可见，我们webpack项目的代码需放在src文件夹下，且需要有index.js文件，否则无法使用零配置功能。

webpack配置

在我们的项目开发中会需要很多功能，光靠零配置肯定完全不够的，这时候就需要我们自定义webpack配置。我们需要在根目录创建一个webpack.config.js文件，该文件的内容可以覆盖webpack的零配置内容。

  • 使用默认的配置文件：webpack.config.js文件 
    
# 使用webpack.config.js 配置文件时，输入命令 `webpack` 即可启动webpack打包
webpack
  • 使用其他配置文件时，如xxx.config.js时，可以通过--config xxx.config.js来指定webpack使用哪个配置文件来进行打包

webpack常见的配置项

loader：

webpack本身只能打包js和json格式的文件，但实际项目中我们还有会css、scss、png、ts等其他文件，这时我们就需要使用loader来处理一些其它类型的文件

  • 实现加载css 安装css-loader

     yarn add css-loader -D

    配置css-loader

    const path = require('path')
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, './dist')
  },
  mode: "development",
  module: {
    rules: [
      {
        test: /\.css$/,
        use: "css-loader"
      }
    ]
  }
}

    安装了并配置了css-loader之后，可以在打包内容中看到css文件的内容，但是在浏览器中打开项目会发现css并没有生效，这是因为，虽然css成功打包了，但是css只是作为js字符串被引入到文件中，并没有放在style标签或者html标签中，这时我们需要style-loader来将css内容放入到style标签中

  • style-loader 安装style-loader

    yarn add style-loader -D

    配置style-loader

const path = require('path')
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, './dist')
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
}

我们知道css3在浏览器中会存在兼容性问题，一般会给属性加上前缀来解决，但在项目开发时逐个去考虑这些兼容性添加前缀无疑是巨大的工作量。我们可以通过autoprefixer这个插件帮我们完成

autoprefixer是postcss工具的插件，所以我们需要安装postcss和postcss-loader

安装postcss、postcss-loader、autoprefixer

yarn add autoprefixer postcss-loader@4.2.0 postcss -D

配置postcss-loader和插件autoprefixer

yarn add autoprefixer postcss-loader@4.2.0 postcss -D

配置postcss-loader和插件autoprefixer
const path = require('path')
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, './dist')
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [require('autoprefixer')]
              }
            }
          }
        ]
      }
    ]
  }
}

以上loader只是处理css文件的一些loader，除此之外常用的还有处理图片路径问题，css文件问题，ts等的各种loader，配置方式都差不多

plugin

loader主要的职责是让webpack认识更多的文件类型，而plugin的职责则是让其可以控制构建流程，从而执行一些特殊的任务。插件的功能非常强大，可以完成各种各样的任务

  • 将css以文件形式导出

    随着项目的增大，我们不想把那么多的样式都放在style标签中，我们想用link标签引入，这时我们就需要使用mini-css-extract-plugin^[8]^

    安装mini-css-extract-plugin

yarn add mini-css-extract-plugin -D

配置mini-css-extract-plugin插件和它的loader，这时我们不需要style-loader了，我们要style-loader替换成MiniCssExtractPlugin.loader

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, './dist')
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "css/[name].css"
    })
  ]
}

  • 自动生成html文件

    我们发现dist下的html是我们自己手动创建的，这显然不够优雅。 我们可以使用html-webpack-plugin 来解决！

安装html-webpack-plugin

yarn add html-webpack-plugin@4.5.2 -D

配置

plugins: [
    new MiniCssExtractPlugin({
      filename: "css/[name].css",
    }),
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]

webpack的本地服务

安装webpack-dev-server

yarn add webpack-dev-server -D

增加dev配置

  devServer: {
    open: true,
    port: 8080,
  },

这时需要使用 webpack-dev-server来启动项目

到这里就算是完成了一个简单的webpack项目配置，已经可是实现一般项目开发中的绝大多数功能了，如果需要其他的额外配置，则需要在添加项目需要的plugin或者loader

avatar
文章
阅读
粉丝