webpack 从0 手动配置
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 手动配置的更多相关文章
- yii2.0 手动配置redis
手动安装yii2.0-redis扩展 1.点击下载:yii2.0-redis扩展 2.把下载的扩展文件放到vendor/yiisoft/下,命名为yii2-redis 3.修改vender/yiiso ...
- 基于Vue + Vuex + Vue-router + Webpack 2.0打造微信界面
一.项目简介 基于Vue + Vuex + Vue-router + Webpack 2.0打造微信界面,实现了微信聊天.搜索.点赞.通讯录(快速导航).个人中心.模拟对话.朋友圈.设置等功能. 二. ...
- webpack 4.x版本手动配置
运行 npm init -y 快速初始化项目 在项目根目录创建src源代码目录和dist产品目录 在src目录下创建 index.html mani.js文件如果后期使用entry打包,这里可以手动创 ...
- webpack 4.0配置
webpack一般是本地安装,一般安装webpack webpack-cli,一般是开发依赖上线的时候不需要打包通常npm install webpack webpack-cli -D安装 安装的时 ...
- webpack 4.0 配置方法以及错误解决
选取一个空目录来试验 全局安装webpack4.1之后 创建目录 mkdir webpacktest && cd webpacktes 初始化package.json npm init ...
- webpack 4.0 版本的简单使用
webpack 4.0 学习指南 最近前端又要变天了,vue作者推出了vue-cli 3版本,并且里面使用了webpack 4. 但是webpack 3 和webpack 4 二者的使用方式完全不一样 ...
- Solr4.0 如何配置使用UUID自动生成id值
原文链接http://blog.csdn.net/keepthinking_/article/details/8501058#comments 最近学习了Lucene,随便也学习了Solr,Solr规 ...
- [webpack] webpack-dev-server介绍及配置
webpack-dev-server是webpack官方提供的一个小型Express服务器.使用它可以为webpack打包生成的资源文件提供web服务.webpack-dev-server官方文档 w ...
- Hibernate3.3.2 手动配置annotation环境
简单记录Hibernate3.3.2如何快速配置环境 一.下载hibernate-distribution-3.3.2.GA-dist.zip文件,建立User libraries. 打开window ...
随机推荐
- linux下软件的安装与卸载
一 软件安装包的类型 通常Linux应用软件的安装有五种: 1) tar+ gz包,如software-1.2.3-1.tar.gz.他是使用UNIX系统的打包工具tar打包的. 2) r ...
- 启动 nodemanger 报错javax.security.sasl.SaslException: GSS initiate failed
最近启动 Hadoop, nodemanger 老挂,报kerberos 验证错误,各种查找原因,时间也同步,kint 也能登录到kerberos,一直找不到原因,最后发现是网关和远端的时间同步,但是 ...
- 004-诠释 Java 工程师【二】
三.框架篇 框架基础 反射:反射是Java开发的一类动态相关机制.因为本身Java语言并不是一款动态语言,如果我们想要得到程序动态的效果,因此便引入了反射机制这一概念. 怎么表达反射? 能用反射做什么 ...
- Parzen-Window Density Estimation(PWDE)
1.概率密度函数 在在数学中,连续型随机变量的概率密度函数(在不至于混淆时可以简称为密度函数)是一个描述这个随机变量的输出值,在某个确定的取值点附近的可能性的函数.而随机变量的取值落在某个区域之内的概 ...
- Python基础-os和sys模块
os模块提供对操作系统进行调用的接口 import os os.getcwd() # 获取当前工作目录 os.chdir(r'd:\fansik') # 修改对当前工作目录 print(os.curd ...
- 查看连接MYSQL数据库的IP信息
要统计数据库的连接数,我们通常情况下是统计总数,细分到每个ip地址: 方法一: ) as ip , count(*) from information_schema.processlist group ...
- Andorid:日常学习笔记(3)——掌握日志工具的使用
Andorid:日常学习笔记(3)——掌握日志工具的使用 使用Android的日志工具Log 方法: Android中的日志工具类为Log,这个类提供了如下方法来供我们打印日志: 使用方法: Log. ...
- iOS UIScrollView 滚动到当前展示的视图居中展示
需求展示: 测试效果1 first uiscrollView 宽度 为屏幕宽度 滚动步长 为 scroll 宽度的1/3 分析: 这个是最普通版 无法使每一次滚动的结果子视图居中展示, WA ...
- asp.net 移除Server, X-Powered-By, 和X-AspNet-Version头
我们在开发Asp.net中,最后部署在IIS上. 然后发送HTTP请求,返回的HTTP头中包含Server, X-Powered-By, 和 X-AspNet-Version信息. 这些信息有时给攻击 ...
- 028_MapReduce中的计数器Counter的使用
一.分析运行wordcount程序屏幕上打印信息 ##运行wordcount单词频率统计程序,基于输出输出路径. [hadoop@hadoop-master hadoop-1.2.1]$ hadoop ...