webpack配置的基本介绍
https://github.com/DDFE/DDFE-blog/issues/10
全局安装 webpack :(当前笔记版本: webpack 3.10.0 , mac环境)
1. npm install webpack -g
2.新建webpack 的项目: mkdir webpack-demo
3. 进入项目并初始化: cd webpack-test npm init
执行完命令后就会出现初始化这个项目的基本信息,如果不想做介绍,可以按照默认的往下进行,直接enter 就可以;
之后文件加多了 package.json 的文件:
4. 安装包, npm install
5.安装 webapck的包 npm install webpack --save
安装中。。。
用vim 查看 package.json vim package.json
6.在该webpack-test 的目录下 新建 src 文件夹,放我们的源码文件,新建 dist 文件夹,放打包文件的盛放文件夹;
7.在 src 下新建js 文件,a.js b.js c.js
8. 新建配置文件 , webpack.config,js
const path = require('path'); module.exports = {
entry: {
pageOne: './src/script/a.js',
pageTwo: './src/script/b.js',
pageThree: './src/script/c.js'
},
output: {
// path: './dist/js',
path: path.resolve(__dirname, 'dist/js'), // The output directory as **absolute path** (required). 此处需要配置一个绝对路径
filename: '[hash]-[name].js'
}
}
entry: 入口文件,可一个,可多个
output: 输出文件,写死 filename, 表示输出一个文件, '[hash]-[name].js' 表示按照哈希值和chunks 的值命名的对应的打包文件9
9. 执行这个配置文件:需要利用npm 脚本来完成,当然在命令行可以写这些打包命令,我们把命令写进脚本:
"webpack": "webpack --config webpack.config.js --progress --display-reasons --colors"
--progress --display-reasons --colors 命令执行时的配置参数,表示 打包进程 打包的理由,彩色
打包后:
文件夹:
打包js完成了,如何打包html 文件,这是我们前端关注的问题: 请听下回分解。。。。
webpack配置的基本介绍的更多相关文章
- webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...
- webpack配置这一篇就够
最近看了一篇好文,根据这个文章重新梳理了一遍webpack打包过程,以前的一些问题也都清楚了,在这里分享一下,同时自己也做了一些小的调整 原文链接:http://www.jianshu.com/p/4 ...
- 前端工程化(二)---webpack配置
导航 前端工程化(一)---工程基础目录搭建 前端工程化(二)---webpack配置 前端工程化(三)---Vue的开发模式 前端工程化(四)---helloWord 继续上一遍的配置,本节主要记录 ...
- vue-cli中webpack配置详解
vue-cli是构建vue单页应用的脚手架,命令行输入vue init <template-name> <project-name>从而自动生成的项目模板,比较常用的模板有we ...
- vue-cli 中的 webpack 配置详解
本篇文章主要介绍了 vue-cli 2.8.2 中的 webpack 配置详解, 做个学习笔记 版本 vue-cli 2.8.1 (终端通过 vue -V 可查看) vue 2.2.2 webpack ...
- 对vue中 默认的 config/index.js:配置的详细理解 -【以及webpack配置的理解】-config配置的目的都是为了服务webpack的配置,给不同的编译条件提供配置
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) var path = require('path') ...
- webpack常用配置项配置文件介绍
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...
- webpack配置指南
Webpack已经出来很久了,相关的文章也有很多,然而比较完整的例子却不是很多,让很多新手不知如何下脚,下脚了又遍地坑 说实话,官方文档是蛮乱的,而且有些还是错的错的..很多配置问题只有爬过坑才知道 ...
- 如何扩展 Create React App 的 Webpack 配置
如何扩展 Create React App 的 Webpack 配置 原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...
随机推荐
- Hadoop完全分布式安装
一.软件版本 Hadoop版本号:hadoop-2.6.0.tar: VMWare版本号:VMware-workstation-full-11.0.0-2305329 Ubuntu版本号:ubuntu ...
- js学习总结:DOM节点二(dom基本操作)
一.DOM继承树 DOM——Document Object Model DOM定义了表示修改文档所需要的方法.DOM对象即为宿主对象,由浏览器厂商定义,用来操作html和xml的一类厂商定义,也有人称 ...
- 【1】【leetcode-76】 最小覆盖子串
最小覆盖子串(hard) (不会) 给定一个字符串 S 和一个字符串 T,请在 S 中找出包含 T 所有字母的最小子串. 示例: 输入: S = "ADOBECODEBANC", ...
- vue-cli脚手架笔记
vue不支持IE8,因为vue使用了IE8无法模拟的 ECMAScript 5特性 使用vue-cli脚手架会让我们的工作非常方便 比如想编译一下es6的语法就使用 babel loader 和 ba ...
- C#数据库发布与连接
1. 打开相关的服务 在控制面板,打开或关闭Windows特性里面,启动相关的ASP.NET相关服务,并启用IIS Manager 2. 发布应用 3. 添加应用 在Administer tools里 ...
- 从虚拟机指令执行的角度分析JAVA中多态的实现原理
从虚拟机指令执行的角度分析JAVA中多态的实现原理 前几天突然被一个"家伙"问了几个问题,其中一个是:JAVA中的多态的实现原理是什么? 我一想,这肯定不是从语法的角度来阐释多态吧 ...
- C#调用C++导出类的一个实例
一直认为带导出类dll的只有VC自己可以调用,其它编程语言无法调用,今天看到一篇文章才知道自己错了.https://blog.csdn.net/huiyouyongdeyu2011/article/d ...
- getaddrinfo函数
一.功能 对于IPv4和IPv6均适用,可以处理名字到地址以及服务到端口这两种变换,返回的是一个sockaddr结构而不是一个地址队列 二.函数原型 #include <netdb.h> ...
- nmap学习之nmap -sP 【目标】
一.通过arp包判断局域网内的主机状态 二.对于局域网外的主机通过向主机 1)发送普通ICMP请求包[类型字段为8,代码字段为0]: 2)发送时间戳ICMP请求包[类型字段为13,代码字段为0]: 3 ...
- 使用js代码将HTML Table导出为Excel
使用js代码将HTML Table导出为Excel的方法: 直接上源码 <html> <head> <meta http-equiv="Content-Type ...