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

时间 2020-02-26

标签开始 webpack 构建单页多页应用开发环境繁體版

原文原文链接

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

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

新建一个空的文件夹，这里就叫作webpack-basic-project，而后在文件夹下面执行html

npm init -y

安装webpack依赖node

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

新建一个webpack的配置文件webpack.config.js
新建一个babel配置文件.babelrc
新建src文件夹，并添加index.js,index.html,index.scss,加入测试代码
index.js:react

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.htmlwebpack

<!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.scssweb

.root {
  color: red;
}

也就是这个时候咱们的文件夹结构是：
npm

配置单页应用

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

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

mode

因为webpack4默认会启动js压缩，为了方便看效果，咱们先用开发模式吧api

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，图片、字体文件。一个一个说明。

解析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": []
}

解析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"]
              }
        ]
    }
  }

解析图片跟字体

安装依赖

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文件夹的。

改为多页应用

那就在src下新建一个文件夹，就叫search/search.jssearch.js