Webpack的安装与配置
先打开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