多入口文件项目打包构建webpack配置

项目构建基本步骤
先安装webpack:
npm i -g webpack
npm i -g webpack - cli

项目依赖
npm i–save -dev webpack
npm i–save -dev webpack - cli

如果未安装webpack就执行以上步骤，如果已经是新建的项目而且已经安装好webpack的情况下，需要用webpack打包项目则可以直接在项目根目录执行以下操作：

在新建项目根目录下执行：

npm init

然后一直默认回车就行，生成以下package.json文件，打包命令可以改成我这样

package.json文件-在根目录即可

{
  "name": "jd-read-pc",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.15.5",
    "@babel/preset-env": "^7.15.6",
    "@babel/plugin-transform-runtime": "^7.15.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.2.2",
    "babel-preset-es2015": "^6.24.1",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.5.3",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "html-webpack-plugin": "^4.2.1",
    "node-sass": "^4.14.0",
    "optimize-css-assets-webpack-plugin": "^4.0.1",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.3.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  },
  "keywords": [],
  "description": ""
}

在根目录下新建或者配置一下webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  /* 
    多入口文件js的配置
  */
  entry: {
    main: './main.js',
    common: './js/common/jquery.min.js',
    request: './js/request/index.js',
    pagination: './js/pagination/index.js',
    menu: './js/menu/index.js',
    index: './js/index/index.js',
  },
  /*  
  打包生成文件放在dist里面
  */
  output: {
    filename: 'js/[name].js?v=[hash]',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      // 打包css文件并且从js抽取css
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader',
        }),
      },
      // 将es6转化为es5语法
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
    ],
  },
  /*  
   识别文件后缀名 引用时候可以省略js css这样的尾缀
  */
  resolve: {
    extensions: ['.js', '.css', '.json'],
  },
  /*  
    插件
  */
  plugins: [
    // 打包前清除dist目录
    new CleanWebpackPlugin(),
    // 生成指定的html模板
    new HtmlWebpackPlugin({
      // 提供打包的模板html 内容不需要引入js或者css 打包完成自动引入
      template: './html/template.html',
      // 打包完成后的新的html文件
      filename: 'index.html',
      // 新的html文件中的资源文件，名称对应entry中的key
      // main是将CSS文件打包并且引入html文件 其他的key都是引入js文件
      chunks: ['main', 'common', 'request', 'pagination', 'menu', 'index'],
    }),
    // 分离css并且放在指定目录下
    new ExtractTextPlugin('css/[name].css'),
    // 压缩css文件
    new OptimizeCssAssetsPlugin(),
  ],
  /*  
    生产模式还是开发模式 默认生产环境：自动压缩打包生成的代码 开发环境：不压缩打包生成代码
    生产模式： mode: 'production'
    开发模式： mode: 'development'
  */
  mode: 'production',
};

至于es6转为es5的语法在根目录加上一个新文件.babelrc
内容如下：

{
  "presets": [
      ["@babel/preset-env", {
          "targets": {
              "browsers": ["> 1%", "last 2 versions"]
          }
      }]
  ],
  "plugins": ["@babel/transform-runtime"]
}

当然多入口文件项目一般都是原生js或者jquery这样的项目，处理css打包的时候需要将所有需要引入html的css文件引入入口文件进行打包处理，例子：
入口文件main.js

/*  
多入口文件工程可以将需要打包的CSS引入,然后在package.json中配置分离和压缩CSS插件即可,然后引入到webpack.config.js进行分离css和压缩css处理即可。
*/
import './css/index.css';
import './css/common.css';
import './css/menu/index.css';
import './css/pagination/index.css';

以上配置没啥问题可以执行 npm i 安装项目的依赖包了
依赖包也没报错误的话说明可以直接打包生成指定的dist文件了，最后打包执行npm run build命令，在根目录下生成dist文件即算是打包完成。

多入口文件项目打包构建webpack配置

猜你喜欢