webpack2学习(一)

时间 2019-11-13

标签 webpack2 webpack 学习繁體版

原文原文链接

目录javascript

准备

Node.js
NPM or YARN（本文用的yarn）

前端工程化解决的问题

JavaScript、CSS代码的合并和压缩
CSS预处理： Less、Sass、Stylus的编译
生成雪碧图(CSS Sprite)
ES6转ES5
模块化
...

前端工程化工具--webpack

入口 entry
出口 output
加载器 Loaders
插件 Plugins

webpack模块化

将业务中写的各类格式的文件(typescript,less,jpg,vue...)经过特定的加载器(Loader)编译后，最终生成.js,.css,.png等静态资源文件。css

模块：在webpack世界里，一张图片、一个css、甚至一个字体，都称为模块(Module)，它们彼此之间存在依赖关系
做用：webpack处理模块之间的依赖关系，并把它们进行打包html

主要应用场景

SPA(单页面富应用)

webpack 基础配置

初始化项目
安装webpack
安装webpack-dev-server（提供服务）

//找到合适的目录下 
//新建一个文件夹用于学习webpack
mkdir webpackStudy
// 进入目录
cd webpackStudy


// 初始化 快速回车确认便可
npm init 
//成功后 后生成一个package.json文件


// 本地局部安装webpack 指定版本号(2.3.2)
// 注意 这里版本号不一样可能会致使后边指令运行出错
yarn add webpack@2.3.2 --save-dev


// 安装成功后package.json中会多一项配置
"dependencies": {
    "webpack": "2.3.2"
  }
  
// 本地局部安装webpack-dev-server@2.4.2
//在开发环境中提供：
//启动一个服务器
//热更新
//接口代理

yarn add webpack-dev-server@2.4.2 --save-dev

webpack启动工程

webpack核心-- 一个.js的配置文件,这个配置决定了：架构好坏前端

//在以前的目录下 （webpackStudy目录）新建一个js文件

touch webpack.config.js
// 打开此文件
open webpack.config.js
// 初始化
// 因为目前没有安装支持ES6的编译插件，暂时不能使用
'export default config';
// webpack.config.js文件内容以下
var config = {

}

module.exports = config

向package.json 中的scripts中添加快速启动webpack-dev-server服务的脚本
(包括打开的局域网ip(不输入则是默认的本地)，打开的端口号(默认8080))vue

"dev": "webpack-dev-server --host xxx.xxx.xxx.xxx --port 8888 --open --config webpack.config.js"

webpack重要配置之入口(Entry) 和出口(Output)java

入口：告诉webpack从哪里开始寻找依赖，而且编译
出口：用来配置编译后的文件存储位置和文件名字webpack

新建入口文件 main.js
==webpack会从main.js文件开始工做==web

touch main.js

而且在webpack.config.js中进行入口和出口配置typescript

// webpack.config.js
var path = require('path')

var config = {
    entry: {
        main: './main'
    },
    // 打包文件存储为 webpackStudy/dist/main.js
    output: {
        //path 用来存放打包文件的输出目录
        path: path.join(__dirname, './dist'),
        // publicPath 资源文件的引用目录
        // 若是资源存放在CDN上，这里能够填写CDN的网址
        publicpath: '/dist/',
        //filename 指定输出文件的名称
        filename: 'main.js'
    }
}

module.exports = config

新建一个index.html 做为SPA入口npm

touch index.html

//index.html 内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack study</title>
</head>
<body>
    <div id="app">
        Hello World
    </div>
    <script type="text/javascript" src="/dist/main.js"></script>
</body>
</html>

如今能够去终端执行

yarn run dev 
或者
npm run dev

SPA

由一个html文件和一堆按需加载的js组成

1. webpack2学习(二)
2. webpack2学习随笔
3. Webpack2学习记录-1
4. Webpack2学习记录-2
5. 工具系列——webpack2的学习
6. webpack2
7. webpack2 项目构建一
8. webpack2&vue2
9. anujs+ webpack2
10. Webpack2 起步
更多相关文章...
• 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
• 我们已经学习了 SQL，下一步学习什么呢？ - SQL 教程
• Kotlin学习（一）基本语法
• Tomcat学习笔记（史上最全tomcat学习笔记）