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.js

const 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 手动配置的更多相关文章

  1. yii2.0 手动配置redis

    手动安装yii2.0-redis扩展 1.点击下载:yii2.0-redis扩展 2.把下载的扩展文件放到vendor/yiisoft/下,命名为yii2-redis 3.修改vender/yiiso ...

  2. 基于Vue + Vuex + Vue-router + Webpack 2.0打造微信界面

    一.项目简介 基于Vue + Vuex + Vue-router + Webpack 2.0打造微信界面,实现了微信聊天.搜索.点赞.通讯录(快速导航).个人中心.模拟对话.朋友圈.设置等功能. 二. ...

  3. webpack 4.x版本手动配置

    运行 npm init -y 快速初始化项目 在项目根目录创建src源代码目录和dist产品目录 在src目录下创建 index.html mani.js文件如果后期使用entry打包,这里可以手动创 ...

  4. webpack 4.0配置

    webpack一般是本地安装,一般安装webpack webpack-cli,一般是开发依赖上线的时候不需要打包通常npm install webpack webpack-cli  -D安装 安装的时 ...

  5. webpack 4.0 配置方法以及错误解决

    选取一个空目录来试验 全局安装webpack4.1之后 创建目录 mkdir webpacktest && cd webpacktes 初始化package.json npm init ...

  6. webpack 4.0 版本的简单使用

    webpack 4.0 学习指南 最近前端又要变天了,vue作者推出了vue-cli 3版本,并且里面使用了webpack 4. 但是webpack 3 和webpack 4 二者的使用方式完全不一样 ...

  7. Solr4.0 如何配置使用UUID自动生成id值

    原文链接http://blog.csdn.net/keepthinking_/article/details/8501058#comments 最近学习了Lucene,随便也学习了Solr,Solr规 ...

  8. [webpack] webpack-dev-server介绍及配置

    webpack-dev-server是webpack官方提供的一个小型Express服务器.使用它可以为webpack打包生成的资源文件提供web服务.webpack-dev-server官方文档 w ...

  9. Hibernate3.3.2 手动配置annotation环境

    简单记录Hibernate3.3.2如何快速配置环境 一.下载hibernate-distribution-3.3.2.GA-dist.zip文件,建立User libraries. 打开window ...

随机推荐

  1. 二、Android应用的界面编程(二)布局管理器

    一.线性布局所有布局都可以作为容器类使用,因此可以调用多个重载的addView()向布局管理器中添加组件.实际上,我们完全可以用一个布局管理器嵌套到其他布局管理器中---因为布局管理器也继承了View ...

  2. 【BZOJ2045】双亲数 莫比乌斯反演

    [BZOJ2045]双亲数 Description 小D是一名数学爱好者,他对数字的着迷到了疯狂的程度. 我们以d = gcd(a, b)表示a.b的最大公约数,小D执著的认为,这样亲密的关系足可以用 ...

  3. 移动端之touch事件--手指的滑动事件

    转自[B5教程网]:http://www.bcty365.com/content-142-5243-1.html 总结:touchmove的最后坐标减去touchstart的起始坐标.X的结果如果正数 ...

  4. iOS 关于自定义UICollectionViewLayout实现复杂布局

    UICollectionView的简单介绍 UICollectionView的结构 Cells Supplementary Views 追加视图 (类似Header或者Footer) Decorati ...

  5. MySQL 中有关auto_increment及auto_increment_offset方面的介绍

    数据库查询中,涉及到auto_increment中的参数变量一共有两个 [root@localhost][(none)]> show variables like 'auto_inc%'; +- ...

  6. MySQL中的SQL流程分析简述

    分析MySQL中这条语句的整个流程 update table_a set c1=xx where c2=xxx 朋友考我的一个问题在此处列出个人见解 1 客户端连接进来首先进行权限验证 2 验证通过后 ...

  7. hbase shell编码显示中文

    最近测试hbase shell,碰到个中文显示编码问题,最后通过Python解决了问题,具体操作如下: hbase(main):015:0* scan 'fr_test_hbase:test_log1 ...

  8. 剑指offer 面试10题

    面试10题: 题目:大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项.n<=39 n=0时,f(n)=0 n=1时,f(n)=1 n>1时,f(n)=f(n-1 ...

  9. C语言定义一个指针变量

    10.2.1 定义一个指针变量 对指针变量的定义包括三个内容: (1) 指针类型说明,即定义变量为一个指针变量: (2) 指针变量名: (3) 变量值(指针)所指向的变量的数据类型. 其一般形式为: ...

  10. CuteEditor.Editor+a+a+c+a+a.a() System.RuntimeType.get_Assembly() 问题解决方法

    问题: Server Error in '/' Application. Attempt by method 'CuteEditor.Editor+a+a+c+a+a.a()' to access m ...