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. HDU - 5071 Chat(模拟)

    原题链接 题意:有各种操作,模拟这个程序并输出每次操作的信息 分析:恶心模拟题...用个map记录一下各个等级女孩的谈话数,同时也便于查找权值为u的在不在队列里.因为n很小,其他就暴力模拟了. #in ...

  2. linux常用命令说明

    1. 基础快捷键使用 ctrl + c:停止进程 ctrl + l:清屏 ctrl + r:搜索历史命令 ctrl + q:退出 2.常用目录或文件夹命令 说明:安装linux时,创建一个itcast ...

  3. 054、准备 macvlan环境(2019-03-21 周四)

    参考https://www.cnblogs.com/CloudMan6/p/7352620.html   除了overlay,docker还开发了另一个支持跨主机容器网络的 driver :macvl ...

  4. GNU Screen Usage

    分屏: 1.在终端输入screen命令 2.Ctrl+a 然后shift+s 上下分屏,切换到下方Ctrl+a tab然后新建一个window(Ctrl+a c) 3.切换到上方,Ctrl+a tab ...

  5. PHP文件管理—实现网盘以及压缩包的功能操作

    代码如下: 1.主页面file_zip.php <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  6. Unet网络

    近期利用遥感影像进行路网提取,利用Unet网络进行图像分割 介绍如下: U-net网络非常简单,前半部分作用是特征提取,后半部分是上采样.在一些文献中也把这样的结构叫做编码器-解码器结构.由于此网络整 ...

  7. aspnetpager使用介绍

    AspNetPager分页控件解决了分页中的很多问题,直接采用该控件进行分页处理,会将繁琐的分页工作变得简单化, 效果如下: 下面是我如何使用AspNetPager控件进行分页处理的详细代码: 1.首 ...

  8. article2pdf (Wordpress plug-in) Multiple vulnerabilities(CVE-2019-1000031, CVE-2019-1010257)

    Product: article2pdf (Wordpress plug-in)Product Website: https://wordpress.org/plugins/article2pdf/A ...

  9. 第27月第10天 cmake

    1.error: tool 'xcodebuild' requires Xcode的解决办法 sudo xcode-select --switch /Applications/Xcode.app/Co ...

  10. JDK自带的LinkedHashMap来实现LRU算法

    1 代码如下 public class LRULinkedHashMap<K, V> extends LinkedHashMap<K, V> { private final i ...