构建工具Webpack

最新推荐文章于 2024-09-05 12:11:21 发布

Mr Robot

最新推荐文章于 2024-09-05 12:11:21 发布

阅读量668

点赞数 2

分类专栏：笔记前端 web 文章标签： webpack javascript 前端

本文链接：https://blog.csdn.net/leva345/article/details/127224491

版权

笔记同时被 3 个专栏收录

74 篇文章 1 订阅

订阅专栏

前端

28 篇文章 1 订阅

订阅专栏

web

5 篇文章 0 订阅

订阅专栏

CSDN话题挑战赛第2期
参赛话题：学习笔记

学习之路，长路漫漫，写学习笔记的过程就是把知识讲给自己听的过程。这个过程中，我们去记录思考的过程，便于日后复习，梳理自己的思路。学习之乐，独乐乐，不如众乐乐，把知识讲给更多的人听，何乐而不为呢?

项目中解决的问题

Webpack的使用：安装Webpack、使用Webpack打包部署、Webpack配置文件、Webpack配置文件的编写。

做题思路

关于Webpack的使用，主要从以下几点讲解：打包部署、文件加载。
新建webpack文件夹，使用Visual Studio Code打开，在终端输入初始化命令“npm init”进行初始化，初始化完成之后就可以开始安装对应的插件了。
npm init：用于创建一个package.json。
（1）在webpack文件夹下新建src文件夹，在此文件夹下新建一个index.js文件；
（2）在index.js文件中添加以下代码：document.write(“Hello world !”)；
（3）在webpack文件夹下新建一个index.html文件，代码如下：

<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="build.js" charset="utf-8"></script>
</body>
</html>

在终端输入“webpack ./src/index.js build.js”命令后，文件夹里会出现build.js文件
。进入到webpack文件夹，用浏览器能够打开index.html文件
，这就表明已经打包完成了。
（4）添加第二个js文件，在src文件夹下新建一个index2.js文件，代码如下：

export let world=()=>{
document.write(" This is index2.js.");
}
index.js文件代码如下：
import {world} from './index2.js'
world();

export、import、let均是ECMAScript 6的语法，之后会讲到。
代码修改完成之后输入“webpack ./src/index.js build.js”命令，再打开页面显示出index2.js文件中输入的内容。
（5）引入CSS样式进行编译，在src文件夹下新建style.css文件，在文件里面添加：
body{background-color:red}
在index.js文件中添加：
import　‘style.css’
使用“webpack ./src/index.js build.js”命令打包会报错，提示编码错误，不能解析CSS样式。需要将引入命令修改成：import “!style-loader!css-loader!./style.css”，再输入打包命令，发现还是报错，提示缺少css-loader、style-loader这两个文件。可以使用“cnpm install css-loader style-loader --save-dev”命令将文件添加到package.json文件中，如果在后期打包部署时还是提示文件缺失，可以使用此命令添加文件；添加完成之后重新打包部署，页面显示为红色。
在上面的使用过程中，对不同的文件打包的时候需要引入对应的解析插件，但是使用这种方式非常不利于企业级开发，而且比较浪费时间，有没有一种更方便友好的方式呢？当然有，下面就来介绍Webpack配置文件的方式，使用webpack.config.js文件进行配置。
在webpack文件夹下新建一个webpack.config.js文件，在文件里面添加以下代码：

module.exports = {
entry: "./src/index.js",
output: {
path: __dirname,
filename: "build.js"
},
module: {
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader"
}
]
}
};

今天get到的小技巧

将index.js文件中的“!style-loader!css-loader!”删除，直接运行Webpack即可，Webpack会自动查找webpack.config.js文件。
在开发过程中每次修改代码都要手动构建，再刷新一次页面才能看到修改的界面效果，是否有别的方式来解决这个问题呢？如果能热更新代码就非常方便开发者了，解决方案是安装一些依赖包，具体包的配置会比较烦琐。到这里读者可能会想到Vue-cli脚手架工具，它可以快速搭建项目，省去配置的烦琐过程，方便开发。