定义
自动化构建工具：
webpack:模块化打包工具
gulp:文件转移、文件压缩。。。
前端工程（前端项目）
中文：https://doc.webpack-china.org/
官网：https://webpack.github.io/
一 webpack的四个核心：入口、出口、loader(预加载)、插件
入口:定义入口文件
出口：在项目当中真正使用的文件
loader： 能够去处理那些非 JavaScript 文件（webpack 自身只理解 javascript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
插件：通过第三方插件可以可以扩展构建项目的功能
二 使用webpack
ps:webpack是基于node.js的，所以如果你要使用webpack的话，必须先安装node.js
如果要让node完全能够解析es6的语法，必须要安装node的8.5.0及以上的版本
1.先安装node.js,在项目文件夹里通过shift+鼠标右键，点击此处打开命令窗口，执行后续操作。
2 初始化package.json配置文件，记录了当前项目的一些信息
cnpm init
或者 yarn init
人家拿到我的配置文件，就可以通过cnpm install（yarn add/npm install） 直接安装配置文件里面所记录的所有依赖
3 把webpack放置到项目依赖当中
普通依赖：咱们项目当中所使用到的一些框架或者插件 cnpm install vue –save yarn add vue
开发依赖：只使用在项目开发工程当中 cnpm install webpack –save-dev yarn add webpack –dev
安装webpack
npm install webpack
cnpm install webpack
yarn add webpack
ps:全局安装 npm -g /yarn global
ps：一旦在项目当中一开始使用了某种包管理工具，那么在项目的整个过程当中最好使用这种包管理工具
使用yarn:https://yarnpkg.com/zh-Hans/
使用cnpm:https://riny.net/2014/cnpm/
webpack -v:用来检测webpack有没有安装成功
yarn -v:…
cls:清屏
4 初始化一个项目结构
dist:放置发布的文件
src:开发所用的文件
|——assets 用来放置我们需要静态资源
|——入口文件
webpack.config.js 编写webpack的配置文件
index.html 客户端的入口文件
5 开始编写webpack的配置文件
module.exports:导出
require(‘文件路径’):导入
在node的执行环境当中，要用”./”来表示同级关系
执行webpack命令，产生一个出口文件(bundle.js)
module.exports={
//用来规定入口文件
entry:'./src/entry.js',
//用来规定出口文件
output:{
filename:'bundle.js',//定义出口文件的名字
//__dirname:返回当前文件所在的文件目录，
//在文件操作当中，所有的路径都必须使用绝对路径（物理路径）
path:__dirname+'/dist/' //规定出口文件的放置目录
}
}
6 loader的使用
loader:loader让webpack能够去处理那些非javascript文件（webpack 自身只理解 javascript）。
比如:让所有浏览器能够识别ES6的语法(babel-loader)
“babel-core”:使用babel的一些特殊编码去处理ES6的文件
“babel-loader”:加载ES6的js文件
“babel-preset-env”:预设一个编译环境，根据当前开发环境来进行编译
cnpm install babel-core babel-loader babel-preset-env –save-dev:表示同时下载多个文件
module:{
//rules里面就是用来配置loader
rules:[
{
//用来规定编译的文件
test:/\.js$/,
//用来规定使用什么loader来进行编译
use:[
{
loader:'babel-loader',
options:{
//env表示是以当前浏览器的环境支持情况来解析成浏览器能识别的es标准
presets: ['env']
}
}
],
exclude:/(node_modules)/
},
]
}
7 webpack的相关命令
webpack 执行webpack.config.js文件
webpack -p:把相关出口文件压缩代码进行压缩
webpack -w:监听入口文件是否发生变化，一旦发生变化就可以映射到出口文件
8 浏览器同步刷新
安装 webpack-dev-server
1) 通过输入webpack-dev-server运行
2 )直接package.json里面进行配置
“scripts”: {
“dev”:”webpack-dev-server –port 8090”
},
3 )直接package.json里面进行配置,但是相关的其他配置放置在webpack.config.js
通过cnpm/npm run dev
通过yarn dev
webpack.config.js代码详细
//module.exports:node导出文件的一种规范
//require('路径'):node导入文件的一种规范
//commonJS模块化的规范
//export default:ES6导出文件的一种规范
//import 变量名 from '路径':ES6导入文件的一种规范
//这里的路径推荐大家使用绝对路径
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports={
//用来规定入口文件
entry:'./src/entry.js',
//用来规定出口文件
output:{
filename:'bundle.js',//定义出口文件的名字
//__dirname:返回当前文件所在的文件目录，
//在文件操作当中，所有的路径都必须使用绝对路径（物理路径）
path:__dirname+'/dist/' //规定出口文件的放置目录
},
devServer:{
port:8088
},
module:{
//rules里面就是用来配置loader
rules:[
{
//用来规定编译的文件
test:/\.js$/,
//用来规定使用什么loader来进行编译
use:[
{
loader:'babel-loader',
options:{
//env表示是以当前浏览器的环境支持情况来解析成浏览器能识别的es标准
presets: ['env']
}
}
],
exclude:/(node_modules)/
},
//配置css的loader
//1 style-loader :通过植入式的方式嵌入到html页面当中
//2 css-loader :用来实现加载css文件的
{
test:/\.css$/,
use:ExtractTextPlugin.extract({
fallback:'style-loader',
use: 'css-loader'
})
},
//如果要模块加载图片，需要用file-loader
{
test:/\.(jpg|png|gif|svg)$/,
use:[
{
loader:'file-loader',
options:{
name:'[name].[ext]',
outputPath:'images/'
}
}
]
}
]
},
//是用来配置插件的选项
plugins:[
new ExtractTextPlugin({
filename:'./css/[name].css'
})
]
}
//ES6---->ES2015
//ES7---->ES2016
//ES8---->ES2017
//babel--->
入口文件详细
import css from './main.css';
import img from './pic1.jpg';
import JS from './demo.js';
window.addEventListener('load', () => {
for (let i = 0; i < $('button').length; i++) {
$('button')[i].addEventListener('click', () => {
alert(i+1);
})
}
console.log(num1+JS.num2);
console.log(JS.heheda);
$('#img').src='./dist/'+img;
});
let num1=20;
function $(selector) {
if (!typeof selector == 'string') return;
let res = selector.substring(0, 1);
switch (res) {
case '#':
return document.querySelector(selector);
break;
default:
return document.querySelectorAll(selector);
}
}
