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配置的基本介绍的更多相关文章

  1. webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server

    一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...

  2. webpack配置这一篇就够

    最近看了一篇好文,根据这个文章重新梳理了一遍webpack打包过程,以前的一些问题也都清楚了,在这里分享一下,同时自己也做了一些小的调整 原文链接:http://www.jianshu.com/p/4 ...

  3. 前端工程化(二)---webpack配置

    导航 前端工程化(一)---工程基础目录搭建 前端工程化(二)---webpack配置 前端工程化(三)---Vue的开发模式 前端工程化(四)---helloWord 继续上一遍的配置,本节主要记录 ...

  4. vue-cli中webpack配置详解

    vue-cli是构建vue单页应用的脚手架,命令行输入vue init <template-name> <project-name>从而自动生成的项目模板,比较常用的模板有we ...

  5. vue-cli 中的 webpack 配置详解

    本篇文章主要介绍了 vue-cli 2.8.2 中的 webpack 配置详解, 做个学习笔记 版本 vue-cli 2.8.1 (终端通过 vue -V 可查看) vue 2.2.2 webpack ...

  6. 对vue中 默认的 config/index.js:配置的详细理解 -【以及webpack配置的理解】-config配置的目的都是为了服务webpack的配置,给不同的编译条件提供配置

    当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面  (环境变量及其基本变量的配置) var path = require('path') ...

  7. webpack常用配置项配置文件介绍

    一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...

  8. webpack配置指南

    Webpack已经出来很久了,相关的文章也有很多,然而比较完整的例子却不是很多,让很多新手不知如何下脚,下脚了又遍地坑 说实话,官方文档是蛮乱的,而且有些还是错的错的..很多配置问题只有爬过坑才知道 ...

  9. 如何扩展 Create React App 的 Webpack 配置

    如何扩展 Create React App 的 Webpack 配置  原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...

随机推荐

  1. Hadoop完全分布式安装

    一.软件版本 Hadoop版本号:hadoop-2.6.0.tar: VMWare版本号:VMware-workstation-full-11.0.0-2305329 Ubuntu版本号:ubuntu ...

  2. js学习总结:DOM节点二(dom基本操作)

    一.DOM继承树 DOM——Document Object Model DOM定义了表示修改文档所需要的方法.DOM对象即为宿主对象,由浏览器厂商定义,用来操作html和xml的一类厂商定义,也有人称 ...

  3. 【1】【leetcode-76】 最小覆盖子串

     最小覆盖子串(hard) (不会) 给定一个字符串 S 和一个字符串 T,请在 S 中找出包含 T 所有字母的最小子串. 示例: 输入: S = "ADOBECODEBANC", ...

  4. vue-cli脚手架笔记

    vue不支持IE8,因为vue使用了IE8无法模拟的 ECMAScript 5特性 使用vue-cli脚手架会让我们的工作非常方便 比如想编译一下es6的语法就使用 babel loader 和 ba ...

  5. C#数据库发布与连接

    1. 打开相关的服务 在控制面板,打开或关闭Windows特性里面,启动相关的ASP.NET相关服务,并启用IIS Manager 2. 发布应用 3. 添加应用 在Administer tools里 ...

  6. 从虚拟机指令执行的角度分析JAVA中多态的实现原理

    从虚拟机指令执行的角度分析JAVA中多态的实现原理 前几天突然被一个"家伙"问了几个问题,其中一个是:JAVA中的多态的实现原理是什么? 我一想,这肯定不是从语法的角度来阐释多态吧 ...

  7. C#调用C++导出类的一个实例

    一直认为带导出类dll的只有VC自己可以调用,其它编程语言无法调用,今天看到一篇文章才知道自己错了.https://blog.csdn.net/huiyouyongdeyu2011/article/d ...

  8. getaddrinfo函数

    一.功能 对于IPv4和IPv6均适用,可以处理名字到地址以及服务到端口这两种变换,返回的是一个sockaddr结构而不是一个地址队列 二.函数原型 #include <netdb.h> ...

  9. nmap学习之nmap -sP 【目标】

    一.通过arp包判断局域网内的主机状态 二.对于局域网外的主机通过向主机 1)发送普通ICMP请求包[类型字段为8,代码字段为0]: 2)发送时间戳ICMP请求包[类型字段为13,代码字段为0]: 3 ...

  10. 使用js代码将HTML Table导出为Excel

    使用js代码将HTML Table导出为Excel的方法: 直接上源码 <html> <head> <meta http-equiv="Content-Type ...