一.webpack基础配置
1.确保安装了最新版本的node和npm。
2.首先，创建一个目录，如demo，使用npm初始化配置（如果npm太慢，可以使用cnpm）：
npm init
执行后，会出现一系列选项，可以按回车键快速确认，完成后，在demo目录下会生成package.json文件
3.把webpack包安装到node_modules目录中
npm install webpack --save-dev
安装成功后，package.json中多了一项配置，并且demo目录下会有node_modules文件夹
我要评论
"devdependencies": {
"webpack": "^4.25.1",
}
4.然后安装webpack-dev-server，他可以提供很多服务，比如启动一个服务器，热更新，接口代理等，同样在本地局部安装：
npm install webpack-dev-server --save-dev
安装完成后，package.json中内容：
{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"error: no test specified\" && exit 1"
},
"author": "",
"license": "isc",
"devdependencies": {
"webpack": "^4.25.1",
"webpack-dev-server": "^3.1.10"
}
}
5.在demo目录下创建webpack.config,js文件：
var config = {
}
module.exports = config;
注：这里的module.exports = config，相当于export default config。因为没有安装es6编译插件，不能用es6语法，否则会报错。
6.之后在package.json的scripts里添加一个快速启动webpack-dev-server服务的脚本：
"scripts": {
"test": "echo \"error: no test specified\" && exit 1",
"dev":"webpack-dev-server --open --config webpack.config.js"
}
当运行npm run dev 命令时，就会执行webpack-dev-server --open --config webpack.config.js命令。其中–config是指向webpack-dev-server读取配置文件路径，–open会在执行命令时自动在打开网页，默认地址是127.0.0.1:8080，不过ip和端口都可以配置，比如：
"dev":"webpack-dev-server --host 172.172.172.1 --port 8082 --open --config webpack.config.js"
这样访问地址就改为172.172.172.1:8082。一般在局域网下，需要额让其他同事访问可以这样配置，否则用localhost就可以。
7.webpack配置中最重要也是必选两项是入口和出口。入口的作用是告诉webpack从哪里开始寻找依赖，并且编译，出口则用来配置编译后的文件存储位置和文件名。在demo目录下新建一个空的main.js作为入口的文件，然后在webpack.config.js中进行入口和输出的配置：
var path = require('path');
var config = {
entry:{
main:'./main'
},
output:{
path:path.join(__dirname,'./dist'),
publicpath:'/dist/',
filename:'main.js'
}
}
module.exports = config;
entry中的main就是配置的单入口，webpack会从main.js文件开始工作。output中path选项用来存放打包后文件的输出目录，是必填项。publicpath指定资源文件引用的目录。filename用于指定输出文件的名称。因此，这里配置的output意为打包后的文件会存储在demo/dist/main.js文件，只要在html引用他就可以了。
8.在demo目录下，新建作为spa入口：
hello world
<script type="text/javascript" src="/dist/main.js"></script>在终端执行下面命令，浏览器就会自动打开页面：
npm run dev
这些内容只是基础配置，往后会逐渐完善配置文件，静待更新
如对本文有疑问， 点击进行留言回复！！
网友评论