Webpack的安装与配置

最新推荐文章于 2024-05-14 13:01:37 发布

加菲猫的鳄鱼

最新推荐文章于 2024-05-14 13:01:37 发布

阅读量317

点赞数

文章标签： webpack

本文链接：https://blog.csdn.net/Anticipate_/article/details/89326770

版权

先打开cdm查看当前有无webpack

第一步先查看有无安装node.js

第二步查询当前有无安装webpack（我目前是已经安装好了）

没安装的可以按照如下操作来：（首要是你必需先创建文件夹起名为webpack,文件夹可放置任何地方）

1：安装全局第三方模块webpack：任意目录下，cmd:cnpm i -g webpack

(cmd:表示是命令行不需要输入命令行中 cnpm是淘宝镜像 i代表的是install g是全局global webpack是你下载的文件名)

2：安装好第一步之后打开你之前创建的文件夹（webpack）在目录下增加package.json的文件然后按住shift+鼠标右键找到选项（在此处打开命令窗口）点击它会打开命令行

cmd:npm init 运行之后会出现设置的文字此时我们可以一直回车就好

之后会提示一条语句 Is this OK?也是回车就好。最后我们的package.json就简单的配置好了

3：此时需要配置项目开发依赖的webpack文件，打开命令行，输入cmd: cnpm i --save-dev webpack cnpm i --save-dev webpack-cli

（这两个是运行webpack打包工具的基础配置模块，下载好后文件会在webpack的文件夹下自动生成node_modules文件夹,此文件夹用来存放下载的模块文件，同时我们之前创建的package.json会自动添加devDependencies，会自动把你下载的包信息显示在里面，如下

"devDependencies": {

"webpack": "^4.30.0",

"webpack-cli": "^3.3.0"

}

4：我们创建一个用来浏览器读取信息的文件夹public(用来打包生成的js、css等文件)；里面需要增加index.html文件，同时再创建一个存放原始数据和javascript的模块，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack文件的打包</title>
</head>
<body>
    <!--此div用来展示执行新建的div-->
   <div class='show'>

   </div> 
   <!--此js是自动生成不需要手动添加文件,./表示是当前目录下的bundle文件，
    ，此时我们要把之前的文件给打包然后生成bundle.js一个文件就行，--> 
   <script src="./bundle.js"></script>   
</body>

</html>

需要创建的文件如下

hello.js的抒写如下

//我们先定义一个包含html元素信息的函数并导出
module.exports=function(){
    let hello=document.createElement("div");   //先创建div元素
    hello.textContent="Hello webpack!";        //给元素添加文本内容
    return hello;                              
}

main.js文件如下

//此文件用于引用hello的信息内容。同时把它append到public下的index.html中
const hello=require("./hello");   //引入hellow文件
document.querySelector("#show").appendChild(hello())

之后我们需要创建webpack.config.js文件，用来设置需要打包文件的入口和出口文件，（它放置在根目录下）

module.exports={
    entry: __dirname + '/app/main.js',   //设置入口改引入的文件，__dirname是两划线
    //表示最外层文件（webpack）再用拼接的方式找到入口文件
    output: {  //表示出口文件，文件的路径和自动生成的文件名
        path: __dirname + '/public',
        filename: 'bundle.js'
    }
}

设置好之后我们找到最开始设置的package.json文件然后添加启动信息

添加会后我们在文件夹中利用shift+鼠标右键打开命令行输入 npm start 以此来启动我们的webpack，同时打开我们的index.html则网页会显示出我们在hello.js中增加的div元素

在命令行运行之后我们的public文件夹下会自动生成bundle.js文件，此时我们的index.html展示文件就可以使用到该js文件的内容

到此我们就可以对js文件进行简单的打包了

我们利用webpack的source map来使得调试更容易

第一步我们需要在webpack.config.js中配置相应的设置

devtool:'eval-source-map',//提供了一种对应编译文件和源文件的方法，使得编译后的代码可读性更高，也更容易调试，在开发阶段这是一个非常好的选项，在生产阶段则一定不要启用这个选项；

此外我们还可以构建webpack的本地服务器（浏览器能监听代码的修改，能自动更新修改后的数据并显示出来）

我们需要在安装项目的开发依赖：当前目录下，cmd: cnpm i -D webpack-dev-server

修改package.json,为"scripts"添加一个名称-值对："server": "webpack-dev-server --open"

修改webpack.config.js，添加webpack-dev-server的配置：

devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
      }

设置好后，我们在命令行运行：npm run server

加菲猫的鳄鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Webpack的安装与配置

先打开cdm查看当前有无webpack第一步先查看有无安装node.js第二步查询当前有无安装webpack（我目前是已经安装好了）没安装的可以按照如下操作来：（首要是你必需先创建文件夹起名为webpack,文件夹可放置任何地方）1：安装全局第三方模块webpack：任意目录下，cmd:cnpm i -g webpack(cmd:表示是命令行不需要输入命令行中c...
复制链接

扫一扫