1.webpack简介

webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源

1.1.webpack安装

在安装webpack之前你需要先安装Node.js,最理想的Node.js版本是长期支持版本(LTS - Long Term Support)

查看Node.js版本

node -v 

1.1.1.全局安装

npm install -g webpack

查看版本

webpack -v

1.1.2.本地安装

通常我们会将 Webpack 安装到项目的依赖中,这样就可以使用项目本地版本的 Webpack。 首先你需要进入到你的项目目录,然后运行下面的命令

npm install webpack --save-dev

2.初识打包

2.1 项目初始化

1.创建一个目录,并且切换到目录下面

mkdir webpack-demo && cd webpack-demo

2.npm初始化并本地安装webpack

npm init -y  # 会在本地生成一个package.json的文件
npm install webpack --save-dev # --save-dev 开发依赖

3.在webpack-demo目录下创建对应的目录和文件

mkdir  src  && cd src   #src 目录 用来存放源文件

touch index.js  # 创建一个入口文件
touch moudel1.js module2.js module3.js #创建3个模块

4.index.js 文件内容

import module_1 from './module1'
import module_2 from './module2'
import module_3 from './module3' module_1()
module_2()
module_3()

  

5.module1.js文件内容

export default function module_1() {
console.log("这是module_1模块")
}

  

6.module2.js文件内容

export default function module_2() {
console.log("这是module_2模块")
}

7.module3.js文件内容

export default function module_3() {
console.log("这是module_3模块")
}

  

8.现在,需要返回到项目的根目录,也就是webpack-demo目录下,新建一个配置文件

touch webpack.config.js

  

9.写入配置内容

const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js'
}
}

  

10.找到根目录下package.json文件,在script后的对象中,添加内容

{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^3.8.1"
}
}

注意:"dev": "webpack"为新增内容

11.最后,需要运行命令打包

npm run dev

  

webpack最佳入门实践系列(1)的更多相关文章

  1. webpack最佳入门实践系列(6)

    10.css模块化 10.1.什么是css模块? CSS模块就是所有的类名都只有局部作用域的CSS文件,当你在一个JavaScript模块中导入一个CSS文件时,CSS模块将会定义一个对象,将文件中类 ...

  2. webpack最佳入门实践系列(5)

    9.路径相关 原来我们打包的东西都存放到了dist目录下,并没有进行分类存储,乱成一团,这一节我们就要处理一下打包的路径,让打包后的目录看起来更加优雅 9.1.代码准备 我们先建立起这样一个目录结构 ...

  3. webpack最佳入门实践系列(4)

    7.使用字体 7.1.安装字体库-font-awesome 我们通过npm来安装字体 npm install font-awesome --save 这个时候,我们的package.json配置文件变 ...

  4. webpack最佳入门实践系列(3)

    6.使用图片 6.1.尝试在css中引入图片 在src目录下新建css文件夹,并且在css文件夹下创建app.css文件,在src目录下新建images文件夹,放入一张图片,在app.css中引入这张 ...

  5. webpack最佳入门实践系列(2)

    3.插件 在前端迅速发展的今天,许多没有太多技术含量并且感觉是在浪费时间的事情,就可以交给构建工具来做,例如:我们去手动创建index.html,手动引入打包好的js文件等操作,都可以叫个webpac ...

  6. webpack的入门实践,看这篇就够了

    webpack的入门实践 我会将所有的读者概括为初学者,即使你可能有基础,学习本节之前我希望你具有一定的JavaScript和node基础 文中的 ... ...代表省略掉部分代码,和上面的代码相同 ...

  7. 【Vuejs】301- Vue 3.0前的 TypeScript 最佳入门实践

    前言 我个人对更严格类型限制没有积极的看法,毕竟各类转类型的骚写法写习惯了. 然鹅最近的一个项目中,是 TypeScript+ Vue,毛计喇,学之...-真香! 1. 使用官方脚手架构建 npm i ...

  8. python 最佳入门实践

    勿在浮沙筑高台,无论什么技术,掌握核心精神和api,是很重要的. 但是入门过程也可能不是一帆风顺的,这里有八个入门任务,看看你完成了没有: http://code.tutsplus.com/artic ...

  9. es6+最佳入门实践(13)

    13.模块化 13.1.什么是模块化 模块化是一种处理复杂系统分解为更好的可管理模块的方式.通俗的讲就是把一个复杂的功能拆分成多个小功能,并且以一种良好的机制管理起来,这样就可以认为是模块化.就像作家 ...

随机推荐

  1. JZOJ 5184. 【NOIP2017提高组模拟6.29】Gift

    5184. [NOIP2017提高组模拟6.29]Gift (Standard IO) Time Limits: 1000 ms  Memory Limits: 262144 KB  Detailed ...

  2. 三分钟明白 Activity工作流 -- java运用

    一. 什么是工作流 以请假为例,现在大多数公司的请假流程是这样的 员工打电话(或网聊)向上级提出请假申请——上级口头同意——上级将请假记录下来——月底将请假记录上交公司——公司将请假录入电脑 采用工作 ...

  3. python3 练习题100例 (十四)

    今天逛贴吧,看到有人求助,做了一下.请大家指正! #!/usr/bin/env python3 # -*- coding: utf-8 -*- __author__ = 'Fan Lijun' imp ...

  4. Python3爬取人人网(校内网)个人照片及朋友照片,并一键下载到本地~~~附源代码

    题记: 11月14日早晨8点,人人网发布公告,宣布人人公司将人人网社交平台业务相关资产以2000万美元的现金加4000万美元的股票对价出售予北京多牛传媒,自此,人人公司将专注于境内的二手车业务和在美国 ...

  5. Olympic Class Ships【奥林匹克级邮轮】

    Olympic Class Ships You probably know about the Titanic, but it was actually just noe of three state ...

  6. Git-Git基本操作

    先来合个影 马上就要和之前实践遗留的数据告别了,告别之前是不是要留个影呢?在Git里,"留影"用的命令叫做tag,更加专业的术语叫做"里程碑"(打tag,或打标 ...

  7. BZOJ 4393: [Usaco2015 Dec]Fruit Feast

    DP #include<cstdio> using namespace std; int T,A,B,F[5000005],G[5000005]; int main(){ scanf(&q ...

  8. 设计模式之第18章-观察者模式(Java实现)

    设计模式之第18章-观察者模式(Java实现) 话说曾小贤,也就是陈赫这些天有些火,那么这些明星最怕的,同样最喜欢的是什么呢?没错,就是狗仔队.英文的名字比较有意思,是paparazzo,这一说法据说 ...

  9. 查看2个Python字典的相同以及不同之处

    a = { "x":1, "y":2, "z":3 } b = { "x":1, "w":11, & ...

  10. python - web自动化测试 - 元素操作 - 等待

    # -*- coding:utf-8 -*- ''' @project: web学习 @author: Jimmy @file: wait.py @ide: PyCharm Community Edi ...