使用 Webpack 打包CSS和JS

文章分类: 

说明:本示例是基于webpack:4.x,babel-loader:8.x,@babel/core:7.x 版本。

使用之前需要在项目中安装相关组件:

npm install -D babel-loader @babel/core @babel/preset-env

备注:-D 即: --save-dev 写入 devDependencies 下。

webpack.config.js 示例文件如下:

const path = require("path");

module.exports = {
  entry: "./src/js/app.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"]
          }
        },
        exclude: /node_modules/
      }
    ]
  }
};

完整代码:https://github.com/jackniu/webpack-app