详解webpack+ES6+Sass搭建多页面应用

下面是详解Webpack+ES6+Sass搭建多页面应用的完整攻略。

目录结构

我们会使用一个简单的目录结构来组织整个应用程序。

├── README.md
├── package.json
├── webpack.config.js
├── webpack.common.js
├── webpack.dev.js
├── webpack.prod.js
├── src
│   ├── pages
│   │   ├── page1
│   │   │   ├── index.html
│   │   │   ├── index.js
│   │   │   ├── index.scss
│   │   ├── page2
│   │   │   ├── index.html
│   │   │   ├── index.js
│   │   │   ├── index.scss
│   ├── css
│   │   ├── reset.scss
│   ├── js
│   │   ├── common.js
├── dist
│   ├── page1.html
│   ├── page2.html
│   ├── assets
│   │   ├── css
│   │   │   ├── main.css
│   │   ├── js
│   │   │   ├── main.js
│   │   ├── images
│   │   │   ├── image1.jpg
│   │   │   ├── image2.png

准备工作

在开始使用Webpack构建多页面应用之前，需要确保已经正确安装了Node.js和npm。

然后，在项目的根目录下，运行以下命令，初始化npm项目：

npm init -y

接着，安装Webpack及其依赖：

npm i webpack webpack-cli webpack-dev-server html-webpack-plugin clean-webpack-plugin --save-dev

配置文件

Webpack的配置文件一般分为三个：

webpack.common.js是通用配置文件，适用于开发环境和生产环境；
webpack.dev.js是开发环境下的配置文件；
webpack.prod.js是生产环境下的配置文件。

首先，我们来编写通用配置文件webpack.common.js，内容如下：

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
  entry: './src/js/common.js', // 公共脚本
  output: {
    filename: 'js/[name].[hash].js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      filename: 'page1.html', // 生成的html文件名称
      template: './src/pages/page1/index.html', // 模板文件路径
      chunks: ['page1'], // 选择需要加入html中的js
    }),
    new HtmlWebpackPlugin({
      filename: 'page2.html', // 生成的html文件名称
      template: './src/pages/page2/index.html', // 模板文件路径
      chunks: ['page2'], // 选择需要加入html中的js
    }),
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader'],
        exclude: /node_modules/,
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader', // 将处理后的CSS代码内联到页面中，使其及时生效
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2, // 设置在内嵌样式中引入其他样式文件时，要引用多少个loader
              modules: false, // 是否启用css modules
            },
          },
          'sass-loader', // 将SCSS代码转换为CSS代码
          {
            loader: 'postcss-loader', // 使用postcss-loader添加CSS3前缀
            options: {
              plugins: [require('autoprefixer')],
            },
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'assets/images', // 图片文件输出路径
            },
          },
        ],
      },
    ],
  },
}

然后，编写开发环境下的配置文件webpack.dev.js，内容如下：

const commonConfig = require('./webpack.common')
const webpack = require('webpack')
const { merge } = require('webpack-merge')

module.exports = merge(commonConfig, {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    contentBase: './dist',
    open: true,
    port: 8080, // 端口号
    hot: true, // 热更新
  },
  plugins: [new webpack.HotModuleReplacementPlugin()],
})

最后，编写生产环境下的配置文件webpack.prod.js，内容如下：

const commonConfig = require('./webpack.common')
const { merge } = require('webpack-merge')

module.exports = merge(commonConfig, {
  mode: 'production',
})

具体应用

接下来，我们使用一个简单的示例来演示Webpack如何构建多页面应用。

示例一

假设我们有一个页面page1，页面结构如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Page 1</title>
    <link rel="stylesheet" href="../../css/reset.scss" />
    <link rel="stylesheet" href="./index.scss" />
  </head>
  <body>
    <h1>Page 1</h1>
    <img src="../../assets/images/image1.jpg" alt="" />
    <script src="index.js"></script>
  </body>
</html>

在src/pages/page1目录中，我们还需要编写相应的JavaScript和Sass代码。

首先，编写JavaScript代码，在src/pages/page1/index.js中输入以下代码：

import '../css/reset.scss'
import './index.scss'

console.log('Page 1')

接着，编写Sass代码，在src/pages/page1/index.scss中输入以下代码：

@import '../../css/reset.scss';

h1 {
  color: red;
}

运行npm run dev命令，在浏览器中打开http://localhost:8080/page1.html，您应该能看到以下结果：

Page 1

同时，页面的样式应该也已经生效了。

示例二

接下来，我们再来演示一个多页面应用的另一个页面page2，页面结构如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Page 2</title>
    <link rel="stylesheet" href="../../css/reset.scss" />
    <link rel="stylesheet" href="./index.scss" />
  </head>
  <body>
    <h1>Page 2</h1>
    <img src="../../assets/images/image2.png" alt="" />
    <script src="index.js"></script>
  </body>
</html>

在src/pages/page2目录中，我们也需要编写相应的JavaScript和Sass代码。

同上，首先编写JavaScript代码，在src/pages/page2/index.js中输入以下代码：

import '../css/reset.scss'
import './index.scss'

console.log('Page 2')

然后编写Sass代码，在src/pages/page2/index.scss中输入以下代码：

@import '../../css/reset.scss';

h1 {
  color: blue;
}

运行npm run dev命令，在浏览器中打开http://localhost:8080/page2.html，您应该能看到以下结果：

Page 2

同时，页面的样式应该也已经生效了。

构建项目

当我们开发完应用程序后，需要将其构建为生产环境的代码。

在终端中运行以下命令：

npm run build

构建完成后，所有的HTML、CSS、JavaScript文件都会生成到dist目录下。

最后，我们可以在dist目录下运行一个静态服务器或者将dist目录中的文件放到Web服务器中进行部署。

以上就是完整的Webpack+ES6+Sass搭建多页面应用的攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详解webpack+ES6+Sass搭建多页面应用 - Python技术站