webpack初体验

webpack初体验

  1. 如果没装 webpack 就先装一下,命令行输入npm i webpack -g
  2. 新建一个项目 在这里插入图片描述
  3. 创建一个空的项目 在这里插入图片描述
  4. 定义一个名称 在这里插入图片描述
  5. 创建一个Module 在这里插入图片描述
  6. 选择静态 web 在这里插入图片描述
  7. 输入名称在这里插入图片描述
  8. 输入 npm init -y 在这里插入图片描述
  9. 在Module下新建两个目录 distsrc ,并且在src 下 新建 index.htmlmain.js在这里插入图片描述
  10. index.html 内容为
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>

    </body>
    </html>
  11. main.js 内容为
    1
    console.log("webpack初体验");
  • 执行 npm i webpack-dev-server -S
  • 执行 npm i webpack -S
  • 执行 npm i webpack-cli -S 在这里插入图片描述
    在这里插入图片描述
  1. 在Module下新建文件 webpack.config.js 内容为

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    //webpack是基于node进行构建的,所以支持node语法
    var path = require("path");

    //当以命令行运行webpack 或 webpack-dev-server ,工具会发现我们没有执行入口或出口文件
    //这时会检查项目中的配置文件,并读取这个文件
    module.exports = {
    entry: path.join(__dirname, "./src/main.js"),//入口文件
    output: {
    path: path.join(__dirname, "./dist"),//输出路径
    filename: "bundle.js"//执行输出文件的名称
    }
    };

    在这里插入图片描述

  2. 执行 npm run dev 在这里插入图片描述

  3. 如果有打印 就表示成功了~!!! 在这里插入图片描述

    webpack集成 html-webpack-plugin

  4. 执行 npm i html-webpack-plugin -S在这里插入图片描述

  5. main.js 中添加 console.log("webpack集成html-webpack-plugin"); 在这里插入图片描述

  6. webpack.config.js 中添加

    1
    2
    //在内存中生成模版页面
    var htmlWebpackPlugin = require("html-webpack-plugin");
  7. webpack.config.js 中 output 后添加 , 之后添加

    1
    2
    3
    4
    5
    6
    plugins: [
    new htmlWebpackPlugin({
    template: path.join(__dirname, "./src/index.html"),//指定模版文件路径
    filename: "index.html"//设置内存中页面名称
    })
    ]
  8. 现在的 webpack.config.js 内容为在这里插入图片描述

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    //webpack是基于node进行构建的,所以支持node语法
    var path = require("path");

    //在内存中生成模版页面
    var htmlWebpackPlugin = require("html-webpack-plugin");

    //当以命令行运行webpack 或 webpack-dev-server ,工具会发现我们没有执行入口或出口文件
    //这时会检查项目中的配置文件,并读取这个文件
    module.exports = {
    entry: path.join(__dirname, "./src/main.js"),//入口文件
    output: {
    path: path.join(__dirname, "./dist"),//输出路径
    filename: "bundle.js"//执行输出文件的名称
    },
    plugins: [
    new htmlWebpackPlugin({
    template: path.join(__dirname, "./src/index.html"),//指定模版文件路径
    filename: "index.html"//设置内存中页面名称
    })
    ]
    };
  9. 这时候就可以删除 index.html 中的 script 引入 在这里插入图片描述

  10. 执行 npm run dev 在这里插入图片描述

    webpack集成 style-loadercss-loader

  11. 执行 npm i style-loader css-loader -S 在这里插入图片描述

  12. src 目录下 新建 css 目录,在 css 目录下新建 index.css 文件,内容为

    1
    2
    3
    4
    body
    {
    background: gray;
    }

    在这里插入图片描述

  13. main.js 中添加console.log("webpack集成 load之style-loader css-loader");import "./css/index.css" ,添加之后的内容为

    1
    2
    3
    4
    5
    console.log("webpack初体验");
    console.log("webpack集成html-webpack-plugin");
    console.log("webpack集成 load之style-loader css-loader");

    import "./css/index.css"
  14. webpack.config.js 中 plugins 后添加 , 再添加

    1
    2
    3
    4
    5
    module: { // 用来配置第三方loader模块的
    rules: [ // 文件的匹配规则
    { test: /\.css$/, use: ['style-loader', 'css-loader'] },//处理css文件的规则
    ]
    }

    在这里插入图片描述

  15. 添加后的内容为

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    //webpack是基于node进行构建的,所以支持node语法
    var path = require("path");

    //在内存中生成模版页面
    var htmlWebpackPlugin = require("html-webpack-plugin");

    //当以命令行运行webpack 或 webpack-dev-server ,工具会发现我们没有执行入口或出口文件
    //这时会检查项目中的配置文件,并读取这个文件
    module.exports = {
    entry: path.join(__dirname, "./src/main.js"),//入口文件
    output: {
    path: path.join(__dirname, "./dist"),//输出路径
    filename: "bundle.js"//执行输出文件的名称
    },
    plugins: [
    new htmlWebpackPlugin({
    template: path.join(__dirname, "./src/index.html"),//指定模版文件路径
    filename: "index.html"//设置内存中页面名称
    })
    ],
    module: { // 用来配置第三方loader模块的
    rules: [ // 文件的匹配规则
    { test: /\.css$/, use: ['style-loader', 'css-loader'] },//处理css文件的规则
    ]
    }
    };
  16. 执行 npm run dev 在这里插入图片描述

webpack 集成 less-loader

  1. 执行 npm i less-loader less -S 在这里插入图片描述
  2. webpack.config.js 中添加匹配规则
    1
    { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
  3. 添加之后内容为 在这里插入图片描述

    webpack集成 sass-loader

  4. 执行 npm i sass-loader node-sass -S 在这里插入图片描述
  5. webpack.config.js 中添加匹配规则
    1
    { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
  6. 添加之后内容为 在这里插入图片描述

    webpack集成 url-loaderfile-loader

  7. 执行 npm i url-loader file-loader -S
  8. index.html 的 body 标签中添加 <div class="diy01"></div> 在这里插入图片描述
  9. css 目录下的 index.css ,添加
    1
    2
    3
    4
    5
    6
    .diy01
    {
    width: 320px;
    height: 214px;
    background-color: aquamarine;
    }
  10. index.css 此时的效果是 在这里插入图片描述
  11. 执行 npm run dev 发现修改的内容已经成功了 在这里插入图片描述
  12. src 下创建目录 images 放入一张图片 在这里插入图片描述
  13. index.css 的 .diy01 修改为
    1
    2
    3
    4
    5
    6
    7
    .diy01
    {
    width: 320px;
    height: 214px;
    background: url("../images/daniu.jpg");
    background-size: cover;
    }
  14. 修改后的内容为 在这里插入图片描述
  15. webpack.config.js 中添加匹配规则
    1
    {test: /\.(png|jpg|jpeg|bmp|gif)$/, use: 'url-loader?limit=43960&name=[hash:8]-[name].[ext]'},
  16. 添加后 webpack.config.js 匹配规则内容为 在这里插入图片描述
  17. 执行 npm run dev 在这里插入图片描述

    webpack集成 bootstrap

  18. 执行 npm i bootstrap@3 -S
  19. index.html 的div 标签下添加
    1
    <span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>
    在这里插入图片描述
  20. main.js 中添加
    1
    2
    3
    /*import "../node_modules/bootstrap/dist/css/bootstrap.css"*/
    /*node_modules中的可以省略*/
    import "bootstrap/dist/css/bootstrap.css"
    在这里插入图片描述
  21. 再把 package.json 中的 "dev" 修改为,删除了 --contentBase src
    "dev": "webpack-dev-server --open --port 2198 --hot"

    在这里插入图片描述

  22. webpack.config.js 中添加匹配规则
    1
    2
    //处理字体文件的loader,bootstrap小图标就是使用这个
    {test:/\.(eot|svg|ttf|woff|woff2)$/,use:'url-loader'},
    在这里插入图片描述
  23. 执行 npm run dev 显示心形小图标 在这里插入图片描述

    webpack集成 babel-loader

  24. 执行以下命令,因为babel-loader默认安装8,不支持,所以指定版本7

    npm i babel-core babel-loader@7 babel-plugin-transform-runtime -S
    npm i babel-preset-env babel-preset-stage-0 -S

  25. main.js 中添加
    1
    2
    3
    4
    5
    6
    class Student
    {
    static stu_info = {name: "大牛", age: "18"}
    }

    console.log(Student.stu_info);
    在这里插入图片描述
  26. 在根目录 创建文件 .babelrc 内容为
    1
    2
    3
    4
    {
    "presets": ["env", "stage-0"],
    "plugins": ["transform-runtime"]
    }
    在这里插入图片描述
  27. 在 ‘webpack.config.js’ 中添加匹配规则
    1
    2
    // 配置 babel-loader 来转换高级的ES语法
    {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/},
    在这里插入图片描述
  28. 执行 npm run dev 在这里插入图片描述