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. linux下软件的安装与卸载

    一 软件安装包的类型 通常Linux应用软件的安装有五种:    1) tar+ gz包,如software-1.2.3-1.tar.gz.他是使用UNIX系统的打包工具tar打包的.    2) r ...

  2. 启动 nodemanger 报错javax.security.sasl.SaslException: GSS initiate failed

    最近启动 Hadoop, nodemanger 老挂,报kerberos 验证错误,各种查找原因,时间也同步,kint 也能登录到kerberos,一直找不到原因,最后发现是网关和远端的时间同步,但是 ...

  3. 004-诠释 Java 工程师【二】

    三.框架篇 框架基础 反射:反射是Java开发的一类动态相关机制.因为本身Java语言并不是一款动态语言,如果我们想要得到程序动态的效果,因此便引入了反射机制这一概念. 怎么表达反射? 能用反射做什么 ...

  4. Parzen-Window Density Estimation(PWDE)

    1.概率密度函数 在在数学中,连续型随机变量的概率密度函数(在不至于混淆时可以简称为密度函数)是一个描述这个随机变量的输出值,在某个确定的取值点附近的可能性的函数.而随机变量的取值落在某个区域之内的概 ...

  5. Python基础-os和sys模块

    os模块提供对操作系统进行调用的接口 import os os.getcwd() # 获取当前工作目录 os.chdir(r'd:\fansik') # 修改对当前工作目录 print(os.curd ...

  6. 查看连接MYSQL数据库的IP信息

    要统计数据库的连接数,我们通常情况下是统计总数,细分到每个ip地址: 方法一: ) as ip , count(*) from information_schema.processlist group ...

  7. Andorid:日常学习笔记(3)——掌握日志工具的使用

    Andorid:日常学习笔记(3)——掌握日志工具的使用 使用Android的日志工具Log 方法: Android中的日志工具类为Log,这个类提供了如下方法来供我们打印日志: 使用方法: Log. ...

  8. iOS UIScrollView 滚动到当前展示的视图居中展示

    需求展示: 测试效果1 first uiscrollView  宽度 为屏幕宽度   滚动步长 为 scroll 宽度的1/3   分析: 这个是最普通版 无法使每一次滚动的结果子视图居中展示, WA ...

  9. asp.net 移除Server, X-Powered-By, 和X-AspNet-Version头

    我们在开发Asp.net中,最后部署在IIS上. 然后发送HTTP请求,返回的HTTP头中包含Server, X-Powered-By, 和 X-AspNet-Version信息. 这些信息有时给攻击 ...

  10. 028_MapReduce中的计数器Counter的使用

    一.分析运行wordcount程序屏幕上打印信息 ##运行wordcount单词频率统计程序,基于输出输出路径. [hadoop@hadoop-master hadoop-1.2.1]$ hadoop ...