2.webpack笔记2-webpack 基本操作

作者: wudimingwo | 来源:发表于2018-11-24 21:48 被阅读0次

2.webpack笔记2-webpack 基本操作
2-webpack基本使用
前端知识体系4.前端工程化1.Webpack专题
webpack基本操作
2019-08-07 Day2 豆丝蓓
2.webpack配置和笔记
GIT 笔记一：基本操作
简介
Nginx学习笔记-基本操作
Python ☞ day 12

image.png

webpack4 的使用
文件夹名称不要用中文, 不要有 webpack 关键字.

全局安装

$ npm install webpack webpack-cli -g

初始化?

$ npm init

局部安装(为了应付不同版本?)

$ npm install webpack webpack-cli --save-dev

packjson
给npm 看的.

$ npm install

可以把 packjson里的依赖包全都下载.

默认入口是 ./src/index.js
创建好之后

$ webpack

生成默认出口 ./dist/main.js

image.png

设置成开发环境

$ webpack --mode=development

配置基本的webpack.config.js
给webpack 看的.

// node 自带路径模块.
var path = require("path");
// 模块化导出格式
module.exports = {
  // 配置入口文件
  entry: "./src/index.js",
  // 配置出口文件
  output: {
    // 出口文件名
    filename: "main1.js",
    path: path.resolve(__dirname, "dist") //__dirname 指的是根目录.dist 设置出口文件夹.
  },
  // 配置 环境, 设置为开发环境
  // 导出的文件不是压缩的
  mode: "development"
  // 设置为生产环境,导出的文件是压缩的.
  //mode : "production"

}

开启监听

$ webpack --watch

下载服务器插件

$ npm install webpack-dev-server -D
-D 表示 --save-dev

配置相关的webpack.config.js


   // 开启服务器时,默认打开dist文件下的index.html
   // 自动刷新页面
   devServer : {
     contentBase : "dist",
     // 更改 端口
     port : 9879
   }

运行 webpack-dev-server

$ webpack-dev-server

也可以用hot 只更新变化的部分.

$ webpack-dev-server --hot

webpack.config.js
css,html,img 等文件的解析

// node 自带路径模块.
var path = require("path");
// 模块化导出格式
module.exports = {
  // 配置入口文件
  entry: "./src/index.js",
  // 配置出口文件
  output: {
    // 出口文件名
    filename: "main1.js",
    path: path.resolve(__dirname, "dist") //__dirname 指的是根目录.dist 设置出口文件夹.
  },
  // 配置 环境变量, 设置为开发环境
  // 导出的文件不是压缩的
  mode: "development",
  // 设置为生产环境,导出的文件是压缩的.
  //mode : "production"

   // 开启服务器时,默认打开dist文件下的index.html
   // 自动刷新页面
   devServer : {
     contentBase : "dist",
     // 更改 端口
     port : 9879
   },
   
   // 应用loader
   
   module : {
     rules : [
        // css loader
        {
          // 正则匹配需要转换的文件类型
          test : /\.css$/,
          // 使用的加载器, 顺序是从右向左,css-loader 用来解析 css style-loader 用来注入style标签?
          use :['style-loader','css-loader']
        },
        {
          test : /\.html$/,
          use : [
            {// 单独抽离的文件,进行处理生成文件
              loader : 'file-loader',
              options : {
                name : "index.html"
              }
            },
            {// 单独抽离html文件
              loader : 'extract-loader'
            },
            {//找到 html文件
              loader : 'html-loader'
            }
          ]
        },
        // es6 js loader
//      {
//        test : /\.js$/,
//        use : ["babel-loader"]
//      },
        // 图片 loader 字体loader
        {
          test : /\.(jpg|png)$/,
          use : [
            {
              loader : "url-loader",
              options : {
                //小于该大小时,生成url码,大于时,生成独立文件.
                limit : 8912,
                // 独立文件的文件夹,以及名称和格式.
                name : "/img/[name].[ext]"
              }
            }
          ]
        }
     ]
   }

}

当多个入口文件时

 
  entry: {
    main : "./src/index.js"
  },
  
  output: {
    // 出口文件名 名字会变成main
    filename: "[name].js",
    path: path.resolve(__dirname, "dist") //__dirname 
  },

不用loader 用插件解析 html文件

npm install html-webpack-plugin -D

webpack.config.js里添加

在开头添加
var HtmlWebpackPlugin = require('html-webpack-plugin');
...
  plugins: [
    new HtmlWebpackPlugin({
      // 设置title
      title : "title",
      // 用哪个index文件为模板,生成的index.html会自动引入main.js
      template : "./src/index.html"
    })
  ]

需要注意的是, 这种方式加载html, 不必在入口函数中进行引入.
这种情况下,hmtl里引入的资源都没有进入入口函数的依赖关系里.
所以都不会被解析打包.

测试另一个插件,用来压缩js的插件

$ npm install uglifyjs-webpack-plugin -D

webpack.config.js

文件头部
var uglify = require("uglifyjs-webpack-plugin");
...

  plugins: [
    new HtmlWebpackPlugin({
      // 设置title
      title : "title",
      template : "./src/index.html"
    }),

    new uglify()
  ]

css文件也可以抽离成独立文件,插件

$ npm install mini-css-extract-plugin -D

webpack.config.js

文件头部
var MiniCss = require("mini-css-extract-plugin");

css 相关loader中, 把style-loader 替换掉
      {
        test: /\.css$/,
        use: [MiniCss.loader, 'css-loader']
      },

插件调用
  plugins: [
    new HtmlWebpackPlugin({
      // 设置title
      title : "title",
      template : "./src/index.html"
    }),

    new uglify(),
    new MiniCss({
      // contenthash:8 根据内容生成八位数哈希值.
      filename : "[name]_[contenthash:8].css"
    })
  ]

image.png

我了个擦, webpack 最烦的地方是,报错之后,不知道问题出在哪里,
就这一个班小时的视频看了3,4个小时才看完,,
真的是,感觉如果不用于构建大项目, 这个东西还挺费时间的.
算了,还是再熟练熟练基本操作..

webpack.config.js

// node 自带路径模块.
var path = require("path");
// 插件必须 在这里引入
var HtmlWebpackPlugin = require("html-webpack-plugin");

var uglify = require("uglifyjs-webpack-plugin");

var MiniCss = require("mini-css-extract-plugin");
// 模块化导出格式
module.exports = {
  // 配置入口文件
  entry: {
    main: "./src/index.js"
  },
  // 配置出口文件
  output: {
    // 出口文件名
    filename: "[name].js",
    path: path.resolve(__dirname, "dist") //__dirname 指的是根目录.dist 设置出口文件夹.
  },
  // 配置 环境变量, 设置为开发环境
  // 导出的文件不是压缩的
  mode: "development",
  // 设置为生产环境,导出的文件是压缩的.
  //mode : "production"

  // 开启服务器时,默认打开dist文件下的index.html
  // 自动刷新页面
  devServer: {
    contentBase: "dist",
    // 更改 端口
    port: 9879
  },

  // 应用loader

  module: {
    rules: [
      // css loader
      {
        // 正则匹配需要转换的文件类型
        test: /\.css$/,
        // 使用的加载器, 顺序是从右向左,css-loader 用来解析 css style-loader 用来注入style标签?
        use: [MiniCss.loader, 'css-loader']
      },
//            {
//              test : /\.html$/,
//              use : [
//                {// 单独抽离的文件,进行处理生成文件
//                  loader : 'file-loader',
//                  options : {
//                    name : "index.html"
//                  }
//                },
//                {// 单独抽离html文件
//                  loader : 'extract-loader'
//                },
//                {//找到 html文件
//                  loader : 'html-loader'
//                }
//              ]
//            },
//       es6 js loader
//            {
//              test : /\.js$/,
//              use : ["babel-loader"]
//            },
//       图片 loader 字体loader
      {
        test: /\.(jpg|png)$/,
        use: [{
          loader: "url-loader",
          options: {
            //小于该大小时,生成url码,大于时,生成独立文件.
            limit: 8912,
            // 独立文件的文件夹,以及名称和格式.
            name: "/img/[name].[ext]"
          }
        }]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 设置title
      title : "title",
      template : "./src/index.html"
    }),

    new uglify(),
    new MiniCss({
      // contenthash:8 根据内容生成八位数哈希值.
      filename : "[name]_[contenthash:8].css"
    })
  ]

}

重来一遍
重来一遍,

创建文件夹
git bash here
局部安装 webpack webpack-cli
初始化 npm init
创建 webpack.config.js
配置入口,出口,环境变量
完,又出错.

image.png

把mode 写成了 mood
试一下 js依赖.
试一下 --watch
下载 webpack-dev-server
测试启动一下
配置 webpack-dev-server 让网页自动刷新
试一下 webpack-dev-server --hot

测试打包 css
创建,css文件,
下载 css-loader, style-loader
main, 引入依赖

完,报错

image.png

应该是没有配置loader

配置loader

还是报同样的错

image.png

找到问题
引入css时写错
把 require("demo.css"); 改成 require("./demo.css");
不能没有./,路径不能简化.

测试把html 打包
下载 file-loader, html-loader, extract-loader
创建 html文件
配置 html文件

出错, 页面没有正常渲染

没有在main.js 中引入 html文件
引入文件

又报错

image.png

又犯了同样的错误
引入文件时,路径填写不准确.
把 require("index.html"); 改成 require("./index.html");

还是没有按照预期渲染, css似乎没起作用.
发现之前引入的 math.js 也没有起作用.

哦,明白了,
我没有在 index.html当中引入生成后的mani.js
尼玛..

测试加载图片模块
粘贴两个图片到 ./ src/img文件夹里
下载 url-loader
配置 url-loader
让img 抽离成独立文件.

测试加载 html web-pack-plugin
下载 web-pack-plugun
在 config.js中引入
在plugins 中 new
需要把 html 相关loader 配置删除

报错
new HtmlWebpackPlugin(); 不能有冒号..低级错误
报错,

image.png

需要把在 main.js中引入的html 给删掉.

配置,生成的html 和我自己写的一样,
有个预期的错误,
即,在html中img标签引入的图片找不到,
因为没有进入main.js的打包过程,就不会产出相关的文件.

测试下载 uglifyjs-loader 压缩js代码
下载 uglifyjs-loader
(这插件名字起的很逗啊, 不是丑的意思嘛?,压缩后确实难看了也对.)
报错应该是名字输入错了

image.png

不是npm install uglifyjs-loader -D
而是 npm install uglifyjs-webpack-plugin -D
配置 uglify
先引入后实例
发现一个问题,
我的js代码会执行两次,
原因是,我的src/index.html里引入了main.js
而 Htmlwebpackplugin 生成的 index.html 也会默认引入main.js
引入两次,导致执行两次.

测试,把css 独立出来.
下载插件 npm install mini-css-extract-plugin -D
把依赖干掉?
头部引入
用minicss.loader 替换掉 style-loader
实例化 new Minicss()
设置文件名.

报错,
引入插件时,名字写错了
不是 mini-css-webpack-plugin
而是mini-css-extract-plugin
出了问题,
没有生成独立的css文件,

原因是, 需要将 css文件在main.js中引入.
这与html的插件不同,html的插件是,用插件就不要引入,
而css这个插件,需要引入,还需要更改 style-loader

在今天结束前开始来第三次.
我们稍微换一下思路.
我们把需要安装的loader 和 plugin
也就是这个 package.json 先保存下来.
用npm install 来试一下.

创建文件夹
git bash here
npm init
在package.json里
添加要安装的项目.

  "devDependencies": {
    "css-loader": "^1.0.1",
    "extract-loader": "^3.0.0",
    "file-loader": "^2.0.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.4.5",
    "style-loader": "^0.23.1",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "url-loader": "^1.1.2",
    "webpack-dev-server": "^3.1.10"
  },

npm install
不知道怎样才算是成功

image.png

创建 webpack.config.js
设置入口,出口,环境变量
创建入口文件,

咦? 我们发现package.json 里的依赖项当中, 是没有webpack webpack-cli 的
应该是不能通过这种方式安装
安装 webpack webpack-cli -D

测试webpack

测试 js 文件依赖.

测试 webpack --watch

测试 webpack-dev-server
配置 webpack-dev-server
测试是否会自动刷新.

出错.

image.png

写成了
devServer : {
contBase : "dist",
port : 9876
}
应该改成
devServer : {
contentBase : "dist",
port : 9876
}

测试 webpack-dev-server --hot

测试依赖一个 css
配置 css-loader style-loader

测试依赖一个html
配置 html-loader extract-loader file-loader

测试加入两个图片.
配置 url-loader

报错,似乎是语法错误

image.png

没放进对象的缘故.

测试,用htmlwebpackplugin 独立出 html文件.
报错,html 解析失败

image.png

路径问题
不应该是
template : "./index.html"
而是
template : "./src/index.html"
此处要填写的是 config.js 和 index.html 之间的相对路径.
html中 img标签没有进入打包之中, 所以会引入失败.
但这要怎么解决呢?
还是说用 file-loader 这种方式更方便?

测试,js 压缩代码插件
报错,应该是插件名称写错了.

image.png

测试 mini-css-extract-plugin 独立css 文件

第三次基本操作完成.感觉确实好多了.
特别是,通过packjson.的方式批量下载 npm包比一个一个下要节省相当多的时间.
但这种方式,应该注意要把不需要的都去掉.

现在感觉,只要能很好的看懂 package.json 和 webpack.config.js 的内容的话,
实际上配置的时候,只需要进行复制粘贴就可以了.
webpack 个人觉得最明显过瘾的地方是,
似乎,我拥有了全世界的包.哈哈哈,

现在弄两个额外的任务.
1.把今天的package.json 里的内容, 以及 webpack.config.js的内容,
制成代码提示.这样比复制粘贴稍微方便一点.

我们试一下 scss loader的配置.

1.失败,似乎 hbuilder 对代码提示的长度是有所限制的.
方法是把一个文件分割成好多个, 我分了5个都不行, 这就没意思了.

2.成功, 参照
webpack4.x 处理less、sass文件,分离编译后的css，自动添加css前缀,自动消除冗余css 第七节;

稍作改动,在loader里添加
{
        test : /\.s(c|a)ss$/,
        use : [MiniCss.loader,"css-loader","sass-loader"]
      },

在main.js中引入
require("./scss/demo1.scss");

花了将近一天的时间打了三次webpack , 希望是值得的.

报错

image.png

应该是入口写错了.
main : "./src/mian.js" 改成 main : "./src/main.js"

测试 js文件依赖

疑问,
在package.json里
如果

  "devDependencies": {
    "webpack": "^4.26.1",
    "webpack-cli": "^3.1.2",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
}
写成

  "devDependencies": {
    "webpack",
    "webpack-cli",
    "babel-core",
    "babel-loader"
}
然后 npm install  他会帮我正常安装嘛?
  "devDependencies": {
    "webpack": "^3",
如果写成这样呢?
}

测试html
报错

image.png

,应该是options写错了

运行报错,
原因是, html当中引入的应该是生成后的 js, 而不是 src 里的js,

测试两个图片
测试图片独立成文件.
报错

image.png

没有生成文件.
我勒个去,
因为我不小心把 src 里的 img给删掉了.

测试, 用 html-webpack-plugin
独立 html 文件.
报错

image.png

哦明白了,main.js中不能引入html

测试 js 代码压缩.

css 分包
测试 mini-css

测试 scss

报错,

    new MiniCssExtractPlugin({
      filename : "./css/[name]_[contenthash:8].css"
    })

放进 css文件夹里之后,

image.png

图片资源路径找不到了.
我们分析一下.
我在 scss 当中的引入的图片路径是这样的.

url(../img/3test.jpg);

是基于src/scss文件的图片的相对路径.
当然我设置的正好和 dist/scss当中的相对路径是一样的.

我们这样测试,
先把 miniCss 路径改回来.

 new MiniCssExtractPlugin({
      filename : "[name]_[contenthash:8].css"
    })

然后把文件放入,src/scss/scss
引入相对路径,看看会怎么样.
成功, 表明, 确实要填写src里的路径关系.

刚才发现,忘了在 main.js 中引入 scss文件,
把文件引入后,我们再重新测试上面的问题.
不是因为没有引入依赖,一样是这个问题.
测试,我们把引入放在 css文件上.
还是同样的报错.

image.png

假设是这样的,
本来生成的文件的路径,都是相对 output 当中的path的,也就是 ./dist
minicss 让生成的 css 文件都相对 ./dist/css?

百度一下
mini-css-extract-plugin;

看文档推测,
不要在插件filename上设置要存放的文件夹,
而是放在loader里.

    rules: [{
        test: /\.css$/,
        use: [{
            loader: MiniCss.loader,
            publicPath: "./dist/css"
          },
          "css-loader"
        ],
      },

报错,一般是配置选项错了.

image.png

还是不行,首先不会帮我创建 css 文件夹.
但有这个效果.

image.png

也就是说, 这个文件到底在哪里创建由 mini 来决定,
但里面的资源文件相对于谁,可以用 publicPath 来决定?

测试一下

            {
        test: /\.css$/,
        use: [{
            loader: MiniCss.loader,
            options : {
              publicPath: "./dist/"
            }
          },
          "css-loader"
        ],
      },

....

    new MiniCss({
      filename: "./css/[name]_[contenthash:8].css"
    })

文件确实是在指定的文件夹下产生了,
但还是报错

image.png

很浪费时间, 一个小时有了,,
百度吧,,
算了先保留

2.webpack笔记2-webpack 基本操作
webpack4 的使用文件夹名称不要用中文, 不要有 webpack 关键字. 全局安装初始化? 局部安装(为...
2-webpack基本使用
这里版本对比/问题/解决方法/概念/安装/使用https://www.webpackjs.com/guides/i...
前端知识体系4.前端工程化1.Webpack专题
本文目录： 1.webpack的定义及基础核心概念 2.webpack构建原理 3.webpack运行的基本流程 ...
webpack基本操作
1.webpack能干嘛用？ 2.webpack项目基本命令和作用 package.json 3.全局安装webp...
2019-08-07 Day2 豆丝蓓
补昨日的生信笔记学习目标：注册阿里云 Putty远程操作熟悉Linux基本操作
2.webpack配置和笔记
相关的源码地址：https://github.com/zqdeveloper/webpack 1.打包样式资源 l...
GIT 笔记一：基本操作
GIT 笔记一：基本操作 SVN 笔记一：入门 Git已经非常流行，网络上的教程很多。这里做个归纳吧。命令行操作很...
简介
通过尚观的mysql视频教程学习mysql基本操作，这是笔记
Nginx学习笔记-基本操作
title: Nginx学习笔记-基本操作date: 2018-07-08tags: [nginx]categor...
Python ☞ day 12
Python学习笔记之 mysql 系统说明：windows 一、基本命令二、数据库操作三、表操作四、数据...