webpack入门使用方法
目前前端开发都流行模块打包啦,这个问题也确实是一个急切的问题。不得已。也看啦下入门的使用方法，之前也看过但是因为没有记录，现在再看的时候又看不懂啦，哎。
部署环境
需要安装的软件有
nodejs+npm
需要npm安装的包有如下
//webpack工具，不用说得安装
"webpack": "^4.16.5",
//方便操作管理webpack的一些配置和操作
"webpack-cli": "^3.1.0",
//启动一个本地服务器,以便自动打包更新页面,方便调试
"webpack-dev-server": "^3.1.5"
找一个空目录,在当前目录打开命令行使用npm 初始化一个package.json文件,并且安装上面提到的三个包,命令如下
npm init npm install webpack --save-dev npm install webpack-cli --save-dev npm install webpack-dev-server --save-dev
在目录中创建一个webpack.config.js文件,使用webpack打包的时候会默认使用这个文件的相关配置打包，如下
module.exports = {
entry: __dirname + "/src/js/main.js", //已多次提及的唯一入口文件
output: {
path: __dirname + "/dist", //打包后的文件存放的地方
filename: "bundle.js" //打包后输出文件的文件名
},
devServer: {
contentBase: __dirname + "/src/pages", //本地服务器所加载的页面所在的目录
historyApiFallback: true, //不跳转
inline: true, // 默认为true, 意思是，在打包时会注入一段代码到最后的js文件中，用来监视页面的改动而自动刷新页面,当为false时，网页自动刷新的模式是iframe，也就是将模板页放在一个frame中
open: true, //自动打开浏览器
port: 9988,
hot: false,
compress: true //压缩
}
}如果想使用其它位置的配置文件时可以用参数指定如下
webpack --config ./build/webpack.dev.conf.js webpack-dev-server --config ./build/webpack.dev.conf.js
这个时候在当前目录打开命令行输入webpack(会自动查找当前目录的webpack.config.js配置文件)就会打包生成一个bundle.js啦.
正常情况下开发时是需要看效果的,所有我们就要用到webpack-dev-server来启动一个本地的服务器来实时的查看页面效果，安装完webpack-dev-server后就可以在命令行输入下面代码来启动(使用webpack.config.js配置文件)一个本地服务器来查看
webpack-dev-server --open --mode development
显然上面命令每次开发时都输入太麻烦啦，使用npm提供的scripts配置方法来便捷启动,scripts里面的每个配置项都可以使用npm run 配置项来启动，打开package.json文件里面添加 scripts配置项来快捷启动，下面添加啦三个 start ,dev ,build,其中dev,build是构建js用的，start是启动一个本地服务器并且监控文件的变化，使用这一个start就够用啦
{
"name": "src",
"version": "1.0.0",
"description": "",
"scripts": {
"start": "webpack-dev-server --open --mode development",
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
}
}启动服务器的方法
npm run start
这个时候你再改动一下对应的页面来js，浏览器会自动刷新看到效果
