屌丝晋级之webpack第一节原生使用指南

本文链接：https://blog.csdn.net/weixin_40073115/article/details/103426068

本篇博文开始对webpack原生用法(没有webpack.config.js)做一个介绍

1.安装webpack
最新的webpack版本已经4.41.2，以下安装默认都是最新版本，我会将最新版本与老版本的坑一并介绍。
npm install webpack -g

由于webpack3之后执行webpack命令是需要在安装webpack-cli

所以
npm install webpack-cli -g

需要同时安装才能开启本篇博文下面的案例，同时注意一定要两者都全局安装（不信你可以自己试下看看会出现什么哦）
此处我已经安装完成：

PS C:\Users\gcc\Desktop\npmPJ\demo-2> webpack -v
4.41.2
PS C:\Users\gcc\Desktop\npmPJ\demo-2> webpack-cli -v
3.3.10
PS C:\Users\gcc\Desktop\npmPJ\demo-2>

1.webpack打包自定义js文件

新建工程demo-4，初始化包 npm init

{
  "name": "gcc-4",
  "version": "1.0.0",
  "description": "gcc-test",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "gcc",
  "license": "ISC"
}

新建src目录在该目录下新建a.js文件编辑内容

document.write("我是a文件");
console.log("我是a文件");

工程根目录下新建index.html文件编辑如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="./dist/main.js"></script>
</body>
</html>

我们的目标：用webpack将a.js打包生成main.js文件，并在页面中引用

执行： webpack ./src/a.js -o dist/main.js

命令中“-o”的含义就是“输出”的意思，老版本的webpack 可以直接 a.js main.js

PS C:\Users\gcc\Desktop\npmPJ\demo-4>  webpack ./src/a.js -o  dist/main.js  
Hash: 3db84c57b427a7b0837a
Version: webpack 4.41.2
Time: 90ms
Built at: 2019-12-06 5:05:19 PM
  Asset       Size  Chunks             Chunk Names
main.js  958 bytes       0  [emitted]  main
Entrypoint main = main.js
[0] ./src/a.js 29 bytes {0} [built]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
PS C:\Users\gcc\Desktop\npmPJ\demo-4>

此时在工程目录下会生成dist文件夹及main.js文件
在这里插入图片描述
运行index.html文件

在这里插入图片描述

ok，此时你已经学会了用webpack打包js文件了，当然我们不能用webpack打包一个文件，太没有意义了。

打包合并的js文件

现在我们再在src下新建b.js并编辑

document.body.style.background = "red";
console.log("我是b文件");

再在a.js文件中引用b.js文件

require("./b.js")
document.write("我是a文件");
console.log("我是a文件");

再次运行 webpack ./src/a.js -o dist/main.js 打包

刷新index.html

在这里插入图片描述
红色的背景色真是血腥！

2.webpack打包自定义css文件

src下新建a.css文件并编辑内容

body{
    background: rgb(30, 49, 223);
}

（记得注释掉b.js文件中//document.body.style.background = “red”;否则你依然来看到血腥，深层原因后续博文做深一步讨论。）
在a.js文件中引用a.css文件

require("./b.js")
require("style-loader!css-loader!./a.css");
// require("style-loader!css-loader!./b.css");
document.write("我是a文件");
console.log("我是a文件");

注意引用css文件的方式“style-loader!css-loader!” 其中“!”是合并的意思两边不能有空格，切记切记!
此时如果直接运行打包命令 webpack ./src/a.js -o dist/main.js 你会看到

在这里插入图片描述
该轮到css-loader style-loader登场了：
webpcak要对css文件进行打包就必须安装 scc-laoder（识别打包css文件）和style-loader（解析style）

在这里插入图片描述
注意一般工程中css-loader 和 style-loader 安装在本项目中并在packge.json记录

cnpm i style-loader css-loader  --save

会自动更新packge.json文件

{
  "name": "gcc-4",
  "version": "1.0.0",
  "description": "gcc-test",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "gcc",
  "license": "ISC",
  "dependencies": {
    "css-loader": "^3.2.1",
    "style-loader": "^1.0.1"
  }
}