从零开始用webpack构建单页/多页应用开发环境

这篇文章主要就是一步一步地,实现用webpack配置一个简单的web开发环境。

初始化文件夹,新建配置文件和测试代码

新建一个空的文件夹,这里就叫做webpack-basic-project,然后在文件夹下面执行

npm init -y

安装webpack依赖

yarn add --dev webpack webpack-cli webpack-dev-server

新建一个webpack的配置文件webpack.config.js

新建一个babel配置文件.babelrc

新建src文件夹,并添加index.js,index.html,index.scss,加入测试代码

index.js:

import "./index.scss";

function test() {
  var root = document.getElementsByClassName("root")[0];
  var p = document.createElement("p");
  var text = document.createTextNode("hello world");
  p.appendChild(text);
  root.appendChild(p);
}

test();

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack basic sample</title>
  </head>
  <body>
    <div class="root"></div>
  </body>
</html>

index.scss

.root {
  color: red;
}

也就是这个时候我们的文件夹结构是:

配置单页应用

一个最基本的配置是这样的

module.export = {
    entry: {},
    mode: "",
    output: {},
    module: {
        rules: [
        ]
    },
    plugins: [] 
}

mode

由于webpack4默认会启动js压缩,为了方便看效果,我们先用开发模式吧

mode: "development"

entry

我们先添加entry,也就是入口文件

entry: {
    index: "./src/index.js",
    search: "./src/search/search.js"
 },

output

然后添加output,也就是编译后输出的文件夹,我们最后通过浏览器访问的也就是这里的。

output: {
    path: path.join(__dirname, "dist"),
    // publicPath: "./" 会给引入的文件前面加个前缀,主要是用于生产环境
    filename: "[name].js"
  },

loader

接着配置Loader,loader就是用来解析文件的。我们需要解析的就是js,css,图片、字体文件。一个一个说明。

  1. 解析js: 用babel-loader

安装依赖:

  • @babel/core是babel的核心api包,必须要安装。
  • @babel/preset-env 它提供一个target参数,可以让我们设置要支持的目标环境,从而能用不同的解析方式去转换js。官方推荐通过新建一个.browserslistrc来设置。
  • @babel/preset-react 考虑到后面要用react加进去的。不需要的可以不添加。
yarn add --dev @babel/core @babel/preset-env babel-loader @babel/preset-react

在webpack.config.js里添加babel-loader

module: {
    rules: [
      {
        test: /\.(js|mjs|jsx|ts|tsx)$/,
        use: "babel-loader"
      }
    ]
 }

编辑.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": []
}
  1. 解析scss

安装依赖

  • sass-loader:转换sass为css
  • css-loader: 解析css
  • mini-css-extract-plugin: 把css提取成一个独立的文件
yarn add --dev sass-loader node-sass css-loader mini-css-extract-plugin

由于loader是链式调用,从右到左,也就是最右边的loader执行完的结果会传递给它旁边的Loader。所以我们写的顺序是sass-loader->css-loader->mini-css-extract-plugin

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  module.exports = {
    module: {
        rules: [
              {
                test: /.scss$/,
                use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
              }
        ]
    }
  }
  1. 解析图片跟字体

安装依赖

yarn add --dev file-loader

添加配置

module: {
  rules: [
      {
        test: /.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: "file-loader"
          }
        ]
      },
      {
        test: /.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name]_[hash:8][ext]"
            }
          }
        ]
      }
  ]
}

plugins

安装依赖

yarn add --dev html-webpack-plugin clean-webpack-plugin
  • html-webpack-plugin:用于根据html模板,生成一个新的html文件,把我们打包出来的js文件嵌入到html中
  • clean-webpack-plugin:用于每次打包前都把dist文件夹清空。
plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, `./src/index.html`),
      filename: "index.html",
      chunks: ["index", "commons"],
      inject: true
    }),
    new CleanWebpackPlugin()
 ],

devServer

由于我们开发模式下使用webpack-dev-server,所以这里设置一下热替换

module.exports = {
  devServer: {
    hot: true
  }   
}

最后,在package.json下面添加启动命令

"scripts": {
    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server --config webpack.config.js --open"
  },

这个时候,我们执行npm run build,就会发现在dist文件夹下面已经有输出了。打开index.html,可以看到它引入了index.js跟index.css,打开也确实是输出了hello world。

执行npm run dev,打开 http://localhost :8080,也可以看到index.html的内容。由于webpack-dev-server的输出是在内存中的,所以我们这个时候是不会创建dist文件夹的。

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章