webpack 使用四个阶段vs 处理 ES6 语法

2020-04-0310:15:17WEB前端开发Comments2,444 views字数 13034阅读模式

一、webpack 第一阶段

命名初始化阶段

项目名不能有汉字,不能取名叫 webpack文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18069.html

1、创建项目名称,并生成 , 命令 : npm init -y文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18069.html

2、安装 : npm i -D webpack webpack-cli文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18069.html

webpack        : 是 webpack 工具的核心包
webpack-cli    : 提供了一些在终端中使用的命令
-D(--save-dev) : 表示项目开发期间的依赖,也就是 : 线上代码中用不到这些包了

3、创建一个文件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18069.html

('我就要被打包了,哦也');

4、在 scripts中,添加脚本文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18069.html

// webpack 是 webpack-cli 中提供的命令, 用来实现打包的
// ./ 入口文件,要打包哪个文件 
"scripts": {
    // 原来的 "test": "...",这行代码可以删除
    "build": "webpack "
},

webpack 使用四个阶段vs 处理 ES6 语法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18069.html


5、运行 : npm run build文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18069.html

webpack 使用四个阶段vs 处理 ES6 语法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18069.html

webpack 使用四个阶段vs 处理 ES6 语法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18069.html


6、设置开发状态 : mode文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18069.html

"build" : "webpack ./ --mode development"

// WARNING in configuration
// The 'mode' option has not been set, webpack will fallback to 'production' for this value.
// 如果没有设置 mode 配置项, webpack 会默认提供 开发环境(production)

// Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
// 项目开发的两种环境
  1. 开发环境 (development) : 开发过程就是开发环境
  2. 生产环境 (production) : 线上环境,也就是 : 项目做好了,发布上线
  生产环境下,打包生产的js文件都是压缩后的,开发环境下代码一般是不压缩的

隔行变色案例

  1. 创建 src/
  2. 隔行案例 => html => ul#list>li{我是 li \$}\*10
  3. 安装 juqery : npm i jquery, 并且引入 jquery
  4. 暂时引入 , 在 里写入
// 使用ES6的模块化语法
import $ from 'jquery' // 优点 不用沿着路径去找

$('#list > li:odd').css('backgroundColor', 'red')
$('#list > li:even').css('backgroundColor', 'green')
// 语法报错
  1. 问题
// 引入  会报错,因为浏览器不支持这个import 的Es6语法
// npm run build 之后
// 引入 dist/ 后会ok,因为webpack 帮我们转化为浏览器能够识别的es5语法了
  1. 历程 :
//1. 如果 中引入 jquery, 再引入  (没有引入jquery了) => ok
//2. 如果 中没有引入 jquery , 直接使用es6的模块化语法 import , 引入就会报错
//3. 如果 中没有引入 jquery , 直接使用es6的模块化语法 import , webapck打包出 dist/ 引入 dist/  ==> ok
  1. 为什么 dist文件下的 文件里的代码突然这么多

看图 (打包流程)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18069.html

  1. code 记得保存一份

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>春春 1 号</li>
        <li>春春 2 号</li>
        <li>春春 3 号</li>
        <li>春春 4 号</li>
        <li>春春 5 号</li>
        <li>春春 6 号</li>
        <li>春春 7 号</li>
        <li>春春 8 号</li>
        <li>春春 9 号</li>
        <li>春春 10 号</li>
    </ul>

    <!-- <script src="../node_modules/jquery/dist/"></script> -->
    <!-- 打包后,原来的就不能用了,要用打包后的dist/ -->
    <!-- <script src=""></script> -->
    <script src="../dist/"></script>

</body>

</html>

('我就要被打包了,哦也');

import $ from 'jquery'

$('li:odd').css('color', 'red')
$('li:even').css('color', 'blue')


    "scripts": {
        "build": "webpack ./src/ --mode development",
        "build1": "webpack  --mode development"
    }

webpack 使用四个阶段vs 处理 ES6 语法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18069.html


二、webpack 第二阶段

webpack 配置文件

1、准备工作文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18069.html

src源文件 : 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18069.html

2、webpack 打包的两种方式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18069.html

1-命令行文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18069.html

2-配置项文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18069.html


3、方式 1 : 命令行文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18069.html

*    "build"  : "webpack ./ --mode development"
*     npm run build
*   一般情况下 : 改为
*     "build" : 入口  --output 出口
*     "build": "webpack ./src/js/ --output ./dist/  --mode development",
*
*     验证 :  引入 


4、方式 2 : 配置项文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18069.html

第一步 : 项目`根目录`下, 创建一个 ``文件 (文件名固定)
        专门指定其他文件 : --config  webpack.XX.js

第二步 : 在 `` 中,进行配置
// webpack 是基于 node的 , 所以配置文件符合 node 方式书写配置
// 注意 : 不要再这个文件中使用ES6的模块化 import语法, 里可以使用,是因为要通过webpack转化为es5的,而这个是webpack 的配置文件,它是要转化别人的,所以必须要通过

第三步 : 修改 `` 中的 `scripts` , 脚本命令为: "build": "webpack"

第四步 : 执行命令 : `npm run build`

// 当修改后,使用nodemon自动监听该文件变化,自动重新执行npm run XXX,不用手动执行 【】
"scripts": {
    "dev": "webpack-dev-server",
    "startdev": "nodemon --watch  --exec npm run dev "
}


5、示例代码()文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18069.html

const path = require('path')

module.exports = {
    // 入口
    entry: (__dirname, './src/js/'),
        // 出口
    output: {
        // 出口目录
        path: (__dirname, './dist'),
        filename: ''
    },
    // 开发模式
    mode: 'development'
}


webpack 配置文件 html-webpack-plugin

  1. html-webpack-plugin 必备的插件
作用 :
  1. 能够根据指定的模板文件 (),自动生成一个新的 ,并且注入到dist文件夹下
  2. 能够自动引入js文件 【即出口文件。】

  1. 安装 : npm i html-webpack-plugin
  2. 配置 :
第一步: 引入模块
const htmlWebpackPlugin = require('html-webpack-plugin')

第二步: 配置
// 插件
plugins: [
  // 使用插件 指定模板
  new htmlWebpackPlugin({
    template: (__dirname, './src/')
  })
]


webpack 配置文件 :webpack-dev-server

  1. webpack-dev-server 使用 webpack 必备的功能(插件)

作用 : 为使用 webpack 打包提供一个服务器环境文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18069.html

【使用webpack-dev-server,是要打一个虚拟的包到服务器里,所以使用webpack-dev-server,中就不能使用 "build": "webpack" 了,因为那样的话,还是会每次更改文件后,都需要手动打一个实体的包去dist里。】文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18069.html

  • 自动为我们的项目创建一个服务器
  • 自动打开浏览器
  • 自动监视文件变化,自动刷新浏览器...

  1. 使用步骤 :
  • 安装 : npm i -D webpack-dev-server
  • 两种使用方式:1-命令行

    2-配置文件(推荐)


  1. 方式 1 : 命令行配置
  • 脚本 : "dev" : "webpack-dev-server"
  • 运行到 npm run dev
  • 查看路径 : "http://localhost:8080/"
  • 「wds」: Project is running at http://localhost:8080/
  • 问题 1 : 自动打开?
  • 解决 : 添加 --open
  • 问题 2 : 指定端口号
  • 解决 : 添加 --port 3001
  • 问题 3 : 热更新
  • 解决 : --hot ( 整个页面和整个项目打包 )
演示: 在浏览器调试样式的地方去掉ul的样式     /* background: skyblue; */
然后分别看 加 --hot 和 不加 --hot 的区别
重新运行脚本


  1. 方式 2 : 配置文件配置
// hot 不要写在配置文件里面,,不然的话还要配其他插件麻烦
 "dev" : "webpack-dev-server --hot",

  devServer : {
    open : true,
    port : 3001
  }


三、webpack 第三阶段 打包上线

  1. 开发模式 : npm run dev ==> 不会打包的 ,只会把项目放到服务器里
  2. 假设项目开发完成了,要上线,怎么操作?
 执行 : `npm run build` 对项目进行打包,生成dist文件
 模拟本地服务器 : 安装 : `npm i -g http-server`
 把dist文件里的内容放到服务器里即可, 直接运行`http-server` 【切换到dist文件夹目录。】

> 开发阶段 :
- 脚本 dev : `npm run dev`
- 工具 : `webpack-dev-server`

> 发布上线 :
- 脚本 build : `npm run build`
- 工具 : `webpack`

> http-server 模拟开启一个虚拟服务器,托管我们的文件
> 1. 安装 : npm i http-server -g
> 2. 使用 : http-server


四、webpack 第四阶段 : 打包非js文件

webpack 只能处理 js 文件,非 js(css、less、图片、字体等)处理处理不了, 借助 loader 加载器文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18069.html

处理 css 文件

  1. 创建一个 css 文件, 然后在 中引入 import '../css/';

    ul { style-list : none }文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18069.html

  2. 安装 : npm i -D style-loader css-loader
  3. 在 中,添加个新的配置项 module
  4. 在 module 中添加 loader 来处理 css
// loader
module: {
  rules: [
      // 1.处理 css
      // 注意点 use执行loader 顺序 从右往左
      // css-loader :  读取css文件内容,将其转化为一个模块
      // style-loader : 拿到模块, 创建style标签, 把模块内容加载进来, 插入到页面中
    { test: /\.css$/, use: ['style-loader', 'css-loader'] }
  ]
}


处理 less 文件

  1. 创建一个 less 文件, 然后再 中 引入 import '../css/';
  2. 安装 : npm i -D less-loader less style-loader css-loader
  3. 在 中, 配置 module->rules
  4. 在 module 中, 添加 loader 来处理 less
ul {
  background-color: aqua;
  li {
    &:hover {
      color: yellow;
    }
  }
}

  1. 配置 :
     { test: /\.less$/, use : ['style-loader','css-loader','less-loader'] }
    
    

处理 图片 文件

设置背景图片
.cls {
    width: 300px;
    height: 300px;
    background: url('../css/');
    background-size: 100%;
}


  1. 安装 : npm i -D url-loader file-loader

    url-loader (推荐) 和 file-loader 二选一即可 【前者包含并依赖后者。】文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18069.html

  2. 在 添加 loader 规则
// 处理图片
{ test : /\.(jpg|png)$/, use : ['url-loader'] },

  1. url-loader 默认会将图片转化为 base64 编码格式, 目的: 提高性能
  2. file-loader 在处理图片时, 会对文件进行重命名 : 【MD5的方式】
原始:    background-image: url(../images/);
处理后:  background-image: url();

  1. base64 编码格式的图片说明 :
  • 精灵图 : 将一些小图片合并为一张图片,减少请求次数,提高性能
  • 字体图标 : 直接将一些小的图片,合并到字体文件中,并且不会失真
  • base64 : 是一种编码格式,能够将图片、文字等常见的文件,转化为 base64 格式,这种字符串格式, 浏览器能够识别并且读取显示到页面中;
  • base64 是一个字符串,也可以直接被内嵌到页面中, 或者 css 中
  • 注意 : 大图片不适合用 base64 处理, 只有小的图标才适合 base64 处理
  1. 设置配置
方式1 :{ test : /\.(jpg|png)$/, use : ['url-loader?limit=57417'] }

方式2 : 
{
    test: /\.(jpg|png)$/,
    use: [{
        loader: 'url-loader',
        options: {
            //  比57417这个小 => 转化为base64
            //  大于等于这个57417值 => 不会转base64,内部调用 file-loader 加载图片
            limit: 57417
        }
    }]
},

// 图片大小 < limit的值,转化为base64,此时用url-loader 【图片大小:即字节】
// 图片大小 >= limit的值,不转base64(还是直接的路径=>md5的格式),此时用file-loader
{ test: /\.(jpg|gif|png)$/, use: ['url-loader?limit=50000'] }

webpack 使用四个阶段vs 处理 ES6 语法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18069.html


处理 字体 文件

  1. 准备字体图标: 字体图标文件 iconfont 或者 从阿里矢量图标里下载
  2. 拷贝到项目中的 css 文件夹中
  3. 在 中引入 css 文件
    import '../css/iconfont/'
    
    
  4. 使用 :
  5. 在 中配置
 // 4. 处理字体图标
  { test:/\.(svg|woff|woff2|ttf|eot)$/,use:'url-loader'}


处理 ES6 语法

  1. 现在的项目都是使用 ES6 开发的, 但是这些新的 ES6 语法, 并不是所有的浏览器都支持, 所以就需要有一个工具,帮我们转成 es5 语法, 这个就是: babel
  2. babel
  3. Babel is a JavaScript compiler. ==> babel 是一个 JavaScript 编译器
  4. webpack 只能处理 import / export 这个 es6 模块化语法
    而其他的 js 新语法,应该使用 babel 来处理
  5. 比如 : var o = { ...obj } 在谷歌上可以,edge 就不可以
  6. babel 的使用 :
  • 安装 1 : npm i -D babel-core babel-loader@7
    • babel-core 是 babel 的核心包
    • babel-loader 加载 js 文件, 并将 js 代码内容交给 babel-core 解析为 es5 低版本的 js
  • 6.2 安装 2 : npm i -D babel-preset-env babel-preset-stage-2
    • babel-preset-* 表示能够解析什么版本的 js 语法
    • babel-preset-env : 表示能够解析 es2015,es2016,es2017,es2018 这些标准的语法
    • babel-preset-stage-2 : 用来解析经常会遇到,但是还没有被采纳为标准的语法
    • 比如 : 'abc'.padStart(10, '6') : 准备 10 位字符,有 abc,前面不够用 6 补充,是 es2017 的语法,
    • babel-polyfill与babel-plugin-transform-runtime 也是做兼容处理的,以前都是用这个,兼容更早的
  • 配置 : 在 中添加一个 loader
  { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

  • 在项目根目录中创建 babel 的配置文件,叫:.babelrc
('我就要被打包了,哦也');

import $ from 'jquery'
import './assets/'
import './assets/'
import './assets/iconfont/'

$('li:odd').css('color', 'red')
$('li:even').css('color', 'green')

{
    "presets": [
        "env",
        "stage-2"
    ],

    // -- -- -- -- -- -
    // 暂时不用
    // 如果未来某一天真的用到了polify
    "plugins": [
        ["transform-runtime", {
            "helpers": false,
            "polyfill": true,
            "regenerator": true,
            "moduleName": "babel-runtime"
        }]
    }

var obj = {
  name: 'zs',
  age: 20
}

var o = { ...obj }
(o)



笔记

# 第一个阶段

1. npm i webpack webpack-cli -D
   安装包 :

- npm i XXX / npm i XXX -S / npm i XXX --save => 记录 dependencies (发布)
- npm i XXX -D / npm i XXX --save-dev => 记录 devDependencies (开发)

2.  脚本 `"build" : "webpack "`

- 运行 build 脚本 : `npm run build`

3. 警告
   The 'mode' option has not been set, webpack will fallback to 'production' for this value.

- `mode` 选项,你没有设置, webpack 默认给你一个值 `production`

Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

- 可以设置 两个值 , `development` `production`
- `production` 生产/发布 (代码压缩)
- `development` 开发 (代码不压缩)

- 如何设置 mode ?
- 命名行设置选项有个格式 : --key value ==> `--mode production/development`

4. 隔行变色案例

# 第二个阶段

## 1. webpack 的配置

- 命名行 + 配置文件

  . 命名行
  现在 `"build": "webpack ./src/ --mode development"`
  格式 :
  --> "webpack ./src/ --mode development"
  --> webpack 入口 --output 出口
  ==> webpack ./src/ --output ./dist/

  . 配置文件

  > 如果 脚本 "build" : "webpack"
  >  => webpack 的默认配置文件

## 2. 插件 : html-webpack-plugin

作用 :

1. 根据指定的模板文件  文件 => 生成一个新的  => 自动注入到 dist 里面
2. 自动引入  文件

使用

3. 安装 : `npm i html-webpack-plugin -D`
4. 引入 `const htmlWebpackPlugin = require('html-webpack-plugin')`
5. 配置一下 :

​```js
plugins: [
  // 配置 html-webpack-plugin插件
  new htmlWebpackPlugin({
    template: (__dirname, './src/')
  })
]
​```

## 3. 插件 : webpack-dev-server

作用
为 webpack 打包提供一个服务器环境
 开启 服务器环境
 自动打开浏览器
 自动监听文件 的变化,自动刷新浏览器\

使用

1. 安装 : `npm i webpack-dev-server -D`
2. 新加一个脚本 :
   `"dev" : "webpack-dev-server --open --port 3001"`
3. 运行脚本 : `npm run dev`
4. 配置

- 1. 自动打开浏览器
- `--open`
- 2. 指定端口号
- `--port 3001`
- 3. 热更新 (体现在 css 上)
- `--hot`

5. 可以把 webpack-dev-server 的几个配置项放到 配置文件里去

​```js

 // webpack-dev-server 的配置信息
  devServer: {
    open: true,
    port: 3002
  }
​```

# 第三个阶段

> 开发阶段 :

- 脚本 dev : `npm run dev`
- 工具 : `webpack-dev-server`

> 发布上线 :

- 脚本 build : `npm run build`
- 工具 : `webpack`

> http-server 模拟开启一个虚拟服务器 托管我们的文件
>
> 1. 安装 : npm i http-server -g
> 2. 使用 : http-server

# 第四个阶段 - 处理 非 js (loader)

## 1. 处理 css

0. 创建 assets/ => ul{ list-style:none; }
1. 引入 :  引入 css
   - import './assets/'
1. 安装 : `npm i style-loader css-loader -D`
1. 配置 :

​```js
module: {
  rules: [
    // 处理 css
    // 顺序 :  从后往前使用的
    // css-loader : 读取  内容 , 放到一个模块里
    // style-loader : 创建style标签 ,把模块内容加载进来,插入到页面中
    { test: /\.css$/, use: ['style-loader', 'css-loader'] }
  ]
}
​```

## 2. 处理 less

0. 创建 

- 引入

1. 安装 : `npm i less-loader less -D`
   > 处理 less 需要三个 loader style-loader css-loader less-loader
2. 配置 :
   `{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }`


## 3. 处理图片

1. 安装 `npm i url-loader file-loader -D`
2. 配置 :

​```js
// 默认 转化为base64 但是如果图片过大, 转化为base64 反而影响性能
// 图片小 => base64
// 图片过大 =>不要转化为base64
 { test : /\.(jpg|gif|png)$/ , use:['url-loader'] }
​```

## 4. 处理字体图标

- 拷贝 iconfont 文件到 assets 里面
- 引入 `.../`
- 使用 : <i class='iconfont icon-zan'></i>

1. 处理字体图标用的 loader => `url-loader`
2. 已经安装好,不需要安装了,直接使用
3. 配置一下 :

​```js
 { test: /\.(eot|svg|ttf|woff|woff2)$/, use: ['url-loader'] }
​```

# 5. 处理 es6 的 js

- webpack 能够处理 es6 语法的,但是只能处理一些 import 等等...
- 有一些 webpack 处理不了 辅助: babel
- babel 是一个 js 的编译器 es6+ => es5- 的语法
- 举例 : let o = {...obj}

配置 babel

1. 安装 1 : `npm i babel-core babel-loader -D`

- babel-core babel 的核心包
- babel-loader 处理 js ,

2. 安装 2 : `npm i babel-preset-env bable-preset-stage-2 -D`
             npm i babel-preset-env babel-preset-stage-2 -D 

- babel-preset- \* 解析什么版本的 js
- -env : 解析标准语法
- stage-2 非标准语法

3. 创建 babel 的配置文件 `.babelrc`

​```js
{
  "presets" : [
    "env","stage-2"
  ]
}
​```

4. 配置
   `{ test :/\.js$/,use:['babel-loader'], exclude :/node_module/ }`


# 热更新
1. 赞 => 改变颜色 => 全局刷新了

2. 热更新 `--hot` => 局部更新


没打包的文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18069.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li>春春 1 号</li>
      <li>春春 2 号</li>
      <li>春春 3 号</li>
      <li>春春 4 号</li>
      <li>春春 5 号</li>
      <li>春春 6 号</li>
      <li>春春 7 号</li>
      <li>春春 8 号</li>
      <li>春春 9 号</li>
      <li>春春 10 号</li>
    </ul>

    <div class="img"></div>

    <i class="iconfont icon-zan"></i>

    <!-- <script src="../node_modules/jquery/dist/"></script> -->
    <!-- <script src="./"></script> -->
    <!-- <script src="../dist/"></script> -->
    <!-- <script src="../dist/"></script> -->
  </body>
</html>



打包后的文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18069.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li>春春 1 号</li>
      <li>春春 2 号</li>
      <li>春春 3 号</li>
      <li>春春 4 号</li>
      <li>春春 5 号</li>
      <li>春春 6 号</li>
      <li>春春 7 号</li>
      <li>春春 8 号</li>
      <li>春春 9 号</li>
      <li>春春 10 号</li>
    </ul>
    <!-- <script src="../node_modules/jquery/dist/"></script> -->
    <!-- <script src="./"></script> -->
    <!-- <script src="../dist/"></script> -->
    <!-- <script src="../dist/"></script> -->
  <script type="text/javascript" src=""></script></body>
</html>



('春春说,他好爽,要被包了,哦也....')

// 引入  jquery
// const $ = require('jquery')

// 经测试,这种引入也可以,但是不推荐
// import $ from '../node_modules/jquery/dist/jquery'

// 使用 es6 的引入模块的语法
// 浏览器 不识别 es6 的 import 语法
import $ from 'jquery'

// 引入 css
import './assets/'

// 引入 less
import './assets/'

// 引入 字体图片样式文件
import './assets/iconfont/'

$('li:odd').css('background', 'blue')
$('li:even').css('background', 'red')

let obj = {
    name: '春春',
    age: 5
}

let o = {...obj }
(o)

// es6 => 2015年
// es7 => 2016
// es8 => 2017
// es9 => 2018
// es10 => 2019


{
    "name": "webpack-37",
    "version": ".0",
    "description": "",
    "main": "",
    "scripts": {
        "dev": "webpack-dev-server --hot",
        "startdev": "nodemon --watch  --exec  npm run dev ",
        "dev1": "webpack-dev-server --open --port 3001",
        "build": "webpack",
        "build3": "webpack ./src/ --output ./dist/ --mode development",
        "build2": "webpack ./src/ --mode development",
        "build1": "webpack  --mode development"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "babel-core": "^6.2",
        "babel-loader": "^",
        "babel-preset-env": "^",
        "babel-preset-stage-2": "^",
        "css-loader": "^2.",
        "file-loader": "^",
        "html-webpack-plugin": "^",
        "less": "^",
        "less-loader": "^",
        "style-loader": "^",
        "url-loader": "^.2",
        "webpack": "^4.3",
        "webpack-cli": "^",
        "webpack-dev-server": "^"
    },
    "dependencies": {
        "jquery": "^"
    }
}



// ./src/ --output ./dist/ --mode development
//   入口            出口                 模式

// webpack  基于node node 的语法 webpack的配置文件里面 可以直接使用

// 引入 path 模块
const path = require('path')

// 引入 html-webpack-plugin 插件
const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // 入口
    entry: (__dirname, './src/'),

    // 出口
    output: {
        // 出口目录
        path: (__dirname, './dist'),
        // 出口文件
        filename: ''
    },

    // 模式
    mode: 'development',

    // 插件 plugins
    plugins: [
        // 配置 html-webpack-plugin插件
        new htmlWebpackPlugin({
            template: (__dirname, './src/')
        })
    ],
    // webpack-dev-server 的配置信息
    devServer: {
        open: true,
        port: 3002
    },

    // 配置  loader 加载器
    module: {
        rules: [
            // 1. 处理 css 的规则
            // 
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },

            // 2. 处理 less
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

            // 3. 处理图片
            // 图片大小 < limit的值,转化为base64,此时用url-loader 【图片大小:即字节】
            // 图片大小 >= limit的值,不转base64(还是直接的路径=>md5的格式),此时用file-loader
            { test: /\.(jpg|gif|png)$/, use: ['url-loader?limit=50000'] },

            // 4. 处理 字体图标
            { test: /\.(eot|svg|ttf|woff|woff2)$/, use: ['url-loader'] },

            // 5. 处理 js
            { test: /\.js$/, use: ['babel-loader'], exclude: /node_modules/ }
        ]
    }
}


.babelrc文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18069.html

{
  "presets": ["env", "stage-2"]
}


ul {
    list-style: none;
}

.img {
    width: 300px;
    height: 300px;
    background: url('./');
    background-size: 100%;
}

.icon-zan {
    font-size: 50px !important;
    color: yellow;
}


ul {
  background: skyblue;
  li {
    &:hover {
      color: yellow;
    }
  }
}
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18069.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/gcs/18069.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定