Webpack 多端多页面项目配置与优化实践

Webpack 多端多页面项目配置实践

1. 安装 webpack

npm install webpack --save-dev

2. 创建 webpack 配置文件

在项目根目录下创建 webpack.config.js 文件，并添加以下内容：

module.exports = {
  entry: './src/index.js',
  output: {
    path: './dist',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};

3. 运行 webpack

webpack

4. 查看打包结果

在 dist 目录下可以看到打包后的 bundle.js 文件。

Webpack 打包优化

1. 使用缓存

webpack 可以使用缓存来提高打包速度。在 webpack.config.js 文件中添加以下内容：

devServer: {
  hot: true,
  inline: true
}

2. 使用压缩

webpack 可以使用压缩来减小打包后的文件大小。在 webpack.config.js 文件中添加以下内容：

optimization: {
  minimize: true
}

3. 使用分离

webpack 可以使用分离来将公共代码提取到单独的文件中。在 webpack.config.js 文件中添加以下内容：

optimization: {
  splitChunks: {
    chunks: 'all'
  }
}

4. 使用懒加载

webpack 可以使用懒加载来按需加载代码。在 webpack.config.js 文件中添加以下内容：

optimization: {
  runtimeChunk: 'single'
}

Webpack 多页面打包

1. 创建多页面入口文件

在 src 目录下创建多个入口文件，如 index.js、page1.js、page2.js 等。

2. 修改 webpack 配置文件

在 webpack.config.js 文件中添加以下内容：

entry: {
  index: './src/index.js',
  page1: './src/page1.js',
  page2: './src/page2.js'
},
output: {
  path: './dist',
  filename: '[name].bundle.js'
}

3. 运行 webpack

webpack

4. 查看打包结果

在 dist 目录下可以看到打包后的 index.bundle.js、page1.bundle.js、page2.bundle.js 文件。

Webpack 多端打包

1. 创建多端入口文件

在 src 目录下创建多个端入口文件，如 web.js、ios.js、android.js 等。

2. 修改 webpack 配置文件

在 webpack.config.js 文件中添加以下内容：

entry: {
  web: './src/web.js',
  ios: './src/ios.js',
  android: './src/android.js'
},
output: {
  path: './dist',
  filename: '[name].bundle.js'
}

3. 运行 webpack

webpack

4. 查看打包结果

在 dist 目录下可以看到打包后的 web.bundle.js、ios.bundle.js、android.bundle.js 文件。