webpack 搭建使用webpack进行模块化开发

最新推荐文章于 2023-06-20 20:15:24 发布

忘喧

最新推荐文章于 2023-06-20 20:15:24 发布

阅读量188

点赞数

分类专栏： JavaScript 文章标签： javascript js node.js

本文链接：https://blog.csdn.net/XiaoYige_97/article/details/107757624

版权

JavaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

webpack 项目的搭建配置

webpack 项目的搭建

创建项目目录

webpack_text // 项目名
	src
    	index.js
		index.html

初始化项目
```
npm init -y
```
把webpack 安装到项目
```
cnpm i webpack webpack-cli -D 
```
这个时候，可以运行的你的webpack项目了 ,直接在终端输入webpack,没有错，就是那么简单，运行结束之后，就会自动生成一个dist文件，里面就有打包的好的代码 main.js文件了
```
webpack 
```
因为webpack默认会打包src 目录下的index.js,并把打包好的文件保存到dist目录下和命名为main.js,在index.js 中写入简单javaScript 代码测试，（问题1：那么如果不想要打包index.js 文件呢，不想把打包好的文件命名为main.js 呢 ,后面再说，先把项目搭建起来先 ）
```
// 这是index.js 文件
console.log("OK")
```
怎么使用打包好的文件呢,在需要引用的地方，用script 引用，这样在控制台，就可以看到“OK”了
```
<script src="../dist/main.js"></script>
```
这个时候，我们的webpack 项目就已经搭建成功了，总结一下：
- 新建目录和文件
- 初始化项目 npm init -y
- 安装 webpack 和 webpack-cli
- 终端中运行 webpack 打包index.js 文件
- 使用

webpack 的基本配置

经过以上操作，我们就可以快乐的使用webpack 打包代码了

while(想看看改了代码的效果){
	1、修改代码 
	2、运行 webpack
	2、打开浏览器 刷新
}

从以上死循环中可以看出，快乐只是短暂的！我们可以使用webpack-dev-server来自动打包（原理和Node.js 中的nodemon工具一样，一保存就会帮我们自动打包 ）,webpack-dev-server还可以使项目通过localhost本地方式进行访问我们的项目（这一点和Apache类似）
安裝配置webpack-dev-server
安装
```
cnpm i webpack-dev-server -D
```

配置

方法一：在package.json 文件中配置,默认是通过访问项目：http://localhost:8080/

// 在package.json 中的script节点的中，直接添加 "dev": "webpack-dev-server"，
//这个时候，你就可以直接使用wepack-dev-server了

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
}

//当然你也可以配webpack-dev-server 的其他设置
// --open ===>打开浏览器
// --port 3001 ===> 设置端口 默认是8080
// --contentBase ===> 打开的目录 默认是项目的根目录 / ，设置为 src 
// --hot ==> 热更新，只打包更新修改的部分代码，而不是整个项目从新打包
 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3001 --contentBase  src --hot"
  }

方法二：

1、同样需要在package.json 文件中的script节点的中，添加 “dev”: “webpack-dev-server”

2、在项目的跟目录下（就是和src 同级），新建一个webpack.config.js文件，我们可以在这个配置文件中配置我们webpack项目

const path = require('path')
// 启动热更新第二步：导入webpack ,因为hot热更新的插件是webpack 的内置模块
const webpack = require('webpack')
module.exports = {
    devServer:{        // 配置webpack-dev-server
        open:true,     //打开浏览器
        port:3001, //设置端口 默认是8080
        contentBase:'src',  //打开的目录 默认是项目的根目录 / ，设置为 src 
        hot:true        //启动热更新第一步
    },
    plugins:[
        new webpack.HotModuleReplacementPlugin() // 启动热更新第三步: 
    ]
}

使用，到了这里，你运行下面的神秘代码，浏览器就会神奇地自动打开，并显示index.html 的内容
```
npm run dev
```
webpack的工作流程（问题1 的答案）

当在控制台运行: webpack 或者 npm run dev
1、webpack发现没有通过命令行的形式指定入口和出口
2、找到配置文件，webpack.config.js
3、解析执行配置文件，导出配置对象
4、当webpack拿到配置对象后，根据入口和出口进行打包构建
```
module.exports = {
    entry:path.join(__dirname,'./src/index.js'),   //入口，表示要使用webpack 打包那个文件
    output:{ //输出文件的配置，输出文件的目录，和文件名
        path:path.join(__dirname,'./dist'),
        filename:'main.js'
    }
}
```
注意：
- package.json 文件中不可以有注释，字符串要用双引号
- 每一次修改配置文件，都要重启webpack-dev-server
- webpack-dev-server 打包好的main.js文件，是放在内存中的跟目录下，看不到的，但是能用
- 引用webpack-dev-serever打包好的 js文件： <script src="/main.js"></script>
- 命令行运行webpack 并指定入口文件和出口文件：webpack .\src\main.js -o .\dist\main.js（不推荐）
- webpack-dev-server 安装时，不支持全局安装
- plugins 插件后面会提到

总结：运行webpack直接打包和使用webpack-dev-serever 工具打包的区别

	webpack	webpack-dev-server
运行方式	webpack	npm run dev
入口文件	默认是src 下的index.js 问件	默认是src 下的index.js文件
出口文件	默认自动新建一个目录dist并把生成的main.js 文件	默认是在内存中，根目录 / main.js
使用方法	src="…/dist/main.js"	src="/main.js"

webpack 中的loader

为什么要使用loader

下面就是webpack文档的解释

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
简单来说，webpack 只能理解低级的javaScript ，loader 可以将webpack 不理解的文件，翻译好再给webpack打包

处理样式文件的 loader

使用.css 文件

webpack处理不了.css文件所以我们需要手动安装一些合适的第三方加载器
安装安装style-loader 和 css-loader
```
cnpm i style-loader css-loader -D
```

配置

//这是webpack.config.js 配置文件
 module:{// 这个节点，用于配置 所有的第三方模块  加载器
      rules:[//所有第三方模块的 匹配规则  
     	  // 处理.css 文件
          {test:/\.css$/,use:['style-loader','css-loader']}
      ]
}

使用

// css目录下，新建一个style.css 文件，并写入样式
h1{
      color:red; /* 字体颜色：红色*/
}
     
// 在main.js 中导入css样式文件
import './css/style.css'

这样，引用<script src="/main.js"></script>,的HTML页面，H1标签都有了.css样式了

使用.scss 文件

webpack处理不了.scss文件所以我们需要手动安装一些合适的第三方加载器
安装 sass-loader 和 node-sass （node-sass 是sass-loader 的内部依赖）
```
cnpm i sass-loader node-sass -D
```

配置

//这是webpack.config.js 配置文件

module:{// 这个节点，用于配置 所有的第三方模块  加载器
      rules:[//所有第三方模块的 匹配规则  
		  // 处理scss 文件
          {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
      ]
}

使用

// css目录下，新建一个style.css 文件，并写入样式
H1{
 font-style: italic;    //字体样式：斜体
}

// 在main.js 中导入scss样式文件
import './css/style.scss'

这样，引用<script src="/main.js"></script>,的HTML页面，H1标签都有了.scss样式了

使用.less 文件

webpack处理不了.scss文件所以我们需要手动安装一些合适的第三方加载器

安装

// 有的教材说还要安装==》 cnpm i less -D   // less 是less-loader 的内部依赖文件
// 亲测 只安装less-loader 也可以用
cnpm i less-loader -D

配置

//这是webpack.config.js 配置文件

module:{// 这个节点，用于配置 所有的第三方模块  加载器
      rules:[//所有第三方模块的 匹配规则  
           // 处理.less 文件
          {test:/\.less$/,use:['style-loader','css-loader','less-loader']}
      ]
}

使用

// css目录下，新建一个style.less 文件，并写入样式
h1{
    font-size: 18px;  // 字体大小：斜体
}

// 在main.js 中导入css样式文件
import './css/style.less'

这样，引用<script src="/main.js"></script>,的HTML页面，H1标签都有了.less样式了

webpack中url-loader 的使用处理图片和字体图标

webpack 默认是无法处理css文件中的 url地址，不管是图片和还是字体库，只要是用URL 都处理不了

安装配置 url-loader

//安装
cnpm i url-loader file-loader -D
//配置
module:{// 这个节点，用于配置 所有的第三方模块  加载器
        rules:[//所有第三方模块的 匹配规则  
            {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader'},//处理图片 URL
            {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'}// 处理字体图标
        ]     
    }

使用

// 在 css 文件中，设置div的背景图片
div{
    background-image: url(../image/1.jpg);
    height: 1000px;
}

这样，引用<script src="/main.js"></script>,的HTML页面，div标签都有了背景图片了

处理高级JS文件的 babel-loader

babel 的中文文档：https://babel.docschina.org/docs/en/
什么是Babel？下面Babel 文档解释：
Babel 是一个 JavaScript 编译器

Babel 是一个工具链，主要用于在旧的浏览器或环境中将 ECMAScript 2015+ 代码转换为向后兼容版本的 JavaScript 代码：
- 转换语法
- Polyfill 实现目标环境中缺少的功能 (通过 @babel/polyfill)
- 源代码转换 (codemods)
简单来说，就是把高级的javaScript 语法，转换为低级的，浏览器都支持的语法。

安装

cnpm i babel-preset-env babel-preset-stage-0 -D
cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

配置第一步:在webpack.config.js 文件中

//这是webpack.config.js 配置文件

module:{// 这个节点，用于配置 所有的第三方模块  加载器
      rules:[//所有第三方模块的 匹配规则  
          //处理babel 处理高级JS 文件
          {test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
      ]
}

配置第二步：添加 .babelrc 配置文件，和src 同级

// 这是.babelrc 配置文件
{
    "presets":["env","stage-0"],
    "plugins":["transform-runtime"]
}

注意
- babel-loader 和core-loader版本不对应问题
```
babel-loader 8.x对应 babel-core 7.x
babel-loader 7.x对应 babel-core 6.x

cnpm i  babel-loader@7.1.5  -D//如果版本不对应，可以降低babel-loader的版本
```
- babel-preset-env,是比较新的ES6语法，他包含了所有和ES*相关的语法
- babel 的文档说，babel 可以把箭头函数转换成普通的函数，这样浏览器，就可以用了，我发现不用babel 浏览器也可以解析箭头函数（千万别和我一样，现在的高版本浏览器都可以解析ES6语法，不要太惊讶，也不要花时间测试）

webpack中的plugins

为什么要使用插件

官方文档解释

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
官方文档解释

webpack 有着丰富的插件接口(rich plugin interface)。webpack 自身的多数功能都使用这个插件接口。这个插件接口使 webpack 变得极其灵活。
简单的说：webpack 的插件可以用来处理各种各样的任务,webpack 有着丰富的插件接口,插件接口使 webpack 变得极其灵活

常用的两个插件

介绍几个插件，体验一下插件的灵活
HotModuleReplacementPlugin ===> webpack的内置模块（配置和HtmlWebpackPlugin一样，不展开来讲）
HtmlWebpackPlugin ====> 第三方 webpack 模块

HtmlWebpackPlugin

这个插件可以帮你生成一.html 文件，在这个文件里，已经帮你引用了.css 和.js 文件
安装
```
cnpm i html-webpack-plugin -D
```

配置，插件的配置，都是在先导入插件，然后再配置，

const path = require('path')

// 启动热更新第二步：导入webpack ,因为hot热更新的插件是webpack 的内置模块
const webpack = require('webpack')

//导入html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    plugins:[// 所有的差价都是在这里配置
        new webpack.HotModuleReplacementPlugin(), // 启动热更新第三步: 
        new HtmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'), // 打包生成哪个文件
            filename:'index.html' // 生成文件的名称
        }) 
    ]
}

注意：

template: template:path.join(__dirname,’./src/index.html’)==> 要打包哪个文件
filename:‘index.html’ ===> 生成的文件的名称

如果不设置template和filename，那么会默认把src 下的index.html 在dist生成index.htm

webpack 运行方式	webpacke	npm run dev
不设置 template,filenam	会再dist 下生成index.html	不知道生成在哪里
设置template 不设置 filename	会再dist 下生成index.html	src /index.html，内存中，我们看不见

访问dist下的index.html：http://localhost:3001/dist/
生成的文件，已经帮我们引用好了 js 文件和 css 文件，(可以在浏览器 F12 检查你的代码)

配置文件总结

package.json

{
  "name": "webpack_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server",
    "dev1": "webpack-dev-server --open --port 3001 --contentBase src --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^4.2.0",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.3.0",
    "less-loader": "^6.2.0",
    "node-sass": "^4.14.1",
    "sass-loader": "^9.0.2",
    "style-loader": "^1.2.1",
    "url-loader": "^4.1.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

webpack.config.js

const path = require('path')

// 启动热更新第二步：导入webpack ,因为hot热更新的插件是webpack 的内置模块
const webpack = require('webpack')

//导入html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // mode:"development", //  production  生产模式/开发模式
    entry:path.join(__dirname,'./src/index.js'),
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'main.js'
    },
    devServer:{        // 配置webpack-dev-server
        open:true,   // 打开浏览器
        port:3001,    // 端口号
        contentBase:'src',  //访问的路径
        hot:true        //启动热更新第一步
    },
    module:{
      rules:[// 这个节点，用于配置 所有的第三方模块  加载器
          {test:/\.css$/,use:['style-loader','css-loader']}, // 处理.css 文件
          {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},// 处理scss 文件
          {test:/\.less$/,use:['style-loader','css-loader','less-loader']},// 处理.less 文件
          {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},//处理js文件
          {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader'},//处理图片 URL
          {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'}// 处理图标
      ]
    },
    plugins:[
        new webpack.HotModuleReplacementPlugin(), // 启动热更新第三步: 
        new HtmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),// 哪个文件生成在内存中
            filename:'index.html'  // 生成的文件的名称
        }) 
    ]
}

.babelrc

{
    "presets":["env","stage-0"],
    "plugins":["transform-runtime"]
}

index.js 文件

// 这是入口文件
  console.log("ok");
  import './css/style.css'
  import './css/style.scss'
  import './css/style.less'

感谢能看到最后的朋友，祝你也能成功搭建自己的webpack 项目

中文文档

webpack的中文文档：https://www.webpackjs.com/
babel 的中文文档：https://babel.docschina.org/docs/en/

忘喧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack 搭建使用webpack进行模块化开发

webpack 项目的搭建配置webpack 项目的搭建创建项目目录webpack_text // 项目名 src index.js index.html初始化项目npm init -y把webpack 安装到项目cnpm i webpack webpack-cli -D 这个时候，可以运行的你的webpack项目了 ,直接在终端输入webpack,没有错，就是那么简单，运行结束之后，就会自动生成一个dist文件，里面就有打包的好的代码 main.js文
复制链接

扫一扫