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开发:fragment将事件传递回activity

    fragment触发事件后传递会给activity,可以通过在fragment中定义一个接口,让activity实现这个接口. 具体代码如下 public class AAFragment exten ...

  2. 用javascript复制富文本

    由于项目需求,希望能够用javascript复制富文本格式的数据,例如全选一个网页Ctrl+C, Ctrl+V到一个word文档中,数据还是原来的格式,显示出来的样子也都和原来一样.现在希望使用jav ...

  3. 让vs只启动自己想调试的站点

    VS中里面多个WEB项目如何只启动一个? 每次启动时,右下角都会出现一堆的 网站有10来个.即使设置了默认启动项目, 但每次按F5启动,或者哪怕是在项目上右键启动新实例 右下角都会出现这一堆的站点 有 ...

  4. JavaScript遍历IP段内所有IP

    思路:将两个IP转换为数字进行比较,小的那个慢慢加一,直到变成大的那个IP所转换的数字,将这其中的数字再转换为IP地址即为IP段内所有的IP. //IP转数字 function ip2int(ip) ...

  5. 004-ibus输入法,快捷键,浏览器

    一.输入法 用 root 身份在终端下,运行下面命令: yum install ibus-pinyin ibus ibus-gtk ibus-qt 使用im-chooser命令,选择ibus为默认输入 ...

  6. 汽车数据的可视化分析(R)

    数据下载:http://www.fueleconomy.gov/feg/epadata/vehicles.csv.zip 将数据导入R中, 1.首先将工作路径设定到本地保存了vehicles.csv的 ...

  7. Junit单元测试注入spring中的bean(转载)

    转载自:http://blog.csdn.net/cy104204/article/details/51076678 一般对于有bean注入的类进行方法单元测试时,会发现bean对象并没有注入进来,对 ...

  8. 剑指offer 面试34题

    面试34题: 题目:二叉树中和为某一值的路径 题:输入一颗二叉树和一个整数,打印出二叉树中结点值的和为输入整数的所有路径.路径定义为从树的根结点开始往下一直到叶结点所经过的结点形成一条路径. 解题代码 ...

  9. LeetCode:数据库技术【175-178】

    LeetCode:数据库技术[175-178] LeetCode已经刷完200道题目,但这只是开始,下一段时间,仍然把刷题作为重点,争取再次完成200道,本篇博客将会带大家熟悉一些数据库面试题,从简单 ...

  10. 前端 JS&&DOM续

    JS续 1.序列化 JSON.stringify(obj)   序列化 JSON.parse(str)        反序列化 2.转义 decodeURI( )                   ...