分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

webpack 从0 手动配置

发布时间:2023-09-06 02:21责任编辑:熊小新关键词:配置webpack

1. npm init

2. npm install -D webpack webpack-cli

3. 创建webpack入口文件( 默认 webpack.config.js 可以通过 webpack --config XX(FileName)).  并配置build 配置

5. package.json 中配置 执行webpack build 命令.

示例:  

// webpack.config.dllPlugin.jsconst path = require(‘path‘)const webpack = require(‘webpack‘)module.exports = { ?mode: ‘production‘, // development ?entry: { ???// 依赖的库数组 ???vendor: [ ?????‘prop-types‘, ?????‘babel-polyfill‘, ?????‘react‘, ?????‘react-dom‘, ?????‘react-router-dom‘, ???] ?}, ?output: { ???path: path.join(__dirname, ‘dist‘), ???filename: ‘[name].js‘, ???library: ‘[name]_[hash]‘, ?}, ?plugins: [ ???new webpack.DllPlugin({ ?????// dllPlugin的name属性需要和libary保持一致 ?????name: ‘[name]_[hash]‘, ?????path: path.join(__dirname, ‘dist‘, ‘[name]-manifest.json‘), ?????// context需要和webpack.config.js保持一致 ?????context: __dirname, ???}) ?]}

package.json

{ ?"scripts": { ???"start": "webpack", ???"dll": "webpack --config webpack.config.dllPlugin.js" ?}, ?"author": "", ?"license": "ISC", ?"dependencies": { ???"babel-polyfill": "^6.26.0", ???"prop-types": "^15.6.2", ???"react": "^16.6.1", ???"react-dom": "^16.6.1", ???"react-router-dom": "^4.3.1" ?}, ?"devDependencies": { ???"webpack": "^4.25.1", ???"webpack-cli": "^3.1.2" ?}}

  

运行结果:

webpack 从0 手动配置

原文地址:https://www.cnblogs.com/dfyg-xiaoxiao/p/9942811.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved