Webpack配置实践指南

1. 安装基础依赖

首先，我们需要安装Webpack的前置工具。打开终端，执行以下命令：

cnpm init
cnpm install webpack -g
cnpm install webpack --save-dev

创建package.json文件后，在项目根目录下运行上述命令。接下来，我们需要创建必要的文件结构：

mkdir -p src
touch src/alert.js
touch src/index.js
touch webpack.config.js
touch index.html

2. 核心配置

编辑webpack.config.js文件，添加基本配置：

module.exports = {
  entry: './src',
  output: {
    path: 'build',
    filename: 'bundle.js'
  }
}

在src文件夹中，创建index.js文件，引入alert.js模块：

require('./alert.js');

3. 加载器（Loader）配置

安装必要的加载器依赖：

cnpm install babel-loader babel-core babel-preset-es2015 -D

创建.babelrc文件，配置Babel预设：

{
  "presets": ["es2015"]
}

修改webpack.config.js，添加Babel加载器：

module.exports = {
  entry: './src',
  output: {
    path: 'build',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        options: {
          presets: ['es2015']
        }
      }
    ]
  }
}

创建src/robot.js文件，添加测试代码：

const greetings = (text, person) => {
  return `${text}, ${person}. I read you but I'm afraid I can't do that`;
};
export default greetings;

在src/index.js中使用导入并输出：

import greetings from './robot.js';
document.write(greetings("Hello, ", "Webpack"));

4. CSS模块处理

安装CSS处理相关依赖：

cnpm install css-loader style-loader -D

创建src/app.css文件，添加样式：

.element {
  background-color: blue;
  color: white;
}

在src/index.js中导入CSS文件并使用：

import styles from './app.css';
console.log(styles.element);

5. 提取CSS到独立文件

为了将CSS模块提取到独立文件，安装ExtractTextWebpackPlugin：

cnpm install extract-text-webpack-plugin -D

修改webpack.config.js，添加CSS模块处理：

module.exports = {
  entry: './src',
  output: {
    path: 'build',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        options: {
          presets: ['es2015']
        }
      },
      {
        test: /\.css$/,
        loader: 'extract-text-webpack-plugin',
        options: {
          extract: {
            filename: '[name]__[local]___[hash:base64:5]'
          }
        }
      }
    ]
  }
}

这样，所有CSS模块会被提取到独立的CSS文件中，便于管理和优化。

通过以上步骤，你已经完成了Webpack的基础配置，能够成功构建项目，实现代码的模块化管理和CSS的提取。接下来，按照npm start命令运行项目，将会生成build/bundle.js文件，并通过index.html展示结果。

转载地址：http://ajbfk.baihongyu.com/

你可能感兴趣的文章