---恢复内容开始---
一、webpack官方地址：https://www.webpackjs.com/
二、webpack是什么？webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。特点：代码拆分 loader转换器 智能分析 插件系统 快速运行。
三、安装步骤：
1.在全局安装webpack，安装之前需要先安装node.js可以在命令提示符查看node版本
显示我的node版本是v10.8.0
2.接下来开始安装webpack
（1）首先我们安装一个全局的webpack
npm install webpack -g
（2）然后安装命令行 npm install -g webpack-cli
由于我安装的时候出现问题所以我百度了一些找到一个解决办法就是两个卸载命令行的命令 npm remove webpack-cli 或 npm remove webpack-command
（3）查看webpack版本 webpack -v 查看cli版本 webpack-cli -v
（4）接下来创建一个文件夹webpack项目在任意文件夹下或者任何一个盘下面
我在D盘下创建了一个叫mywebpack的文件夹（注：文件夹名不要叫webpack）
（5）创建一个package.json文件用于保存项目版本，依赖关系。
在当前目录使用命令提示符命令创建 npm init或手动创建
首先跳到我新建的目录下，然后输入npm init
然后出现这个界面，一直按Enter键
当跳回这个地址时我们的package.json文件就建好了
这时打开文件夹就能看到这个我们用命令行创建的package.json包。
（6）接下来在当前目录下安装webpack npm install webpack --save-dev（注意前面说的项目目录不要用webpack否则这里报错）
安装过程可能有点慢，等待就好了。
安装好了，然后我们查看一下项目文件
当当当~~~又出现两个文件说明我们成功了
（7）然后我们创建一个目录名为src的文件夹 然后创建一个index.js文件写一些内容
（8）然后我们直接运行webpack --mode development或者webpack --mode production这样会默认进行打包，入口文件是‘./src/index.js‘（./是指当前目录，src是我们创建的目录，index.js是我们自己创建的文件）输出路径‘./dist/main.js‘ （development和production production不支持监听，producton侧重于打包后的文件大小 development侧重于构建的速度）
这样我们就成功了
生成默认文件然后我们创建一个index.html引入我们打包后的main.js文件输出看一下
（9）我们也可以不使用development 默认打包 我们自己创建一个webpack.config.js文件，在项目根目录下新建一个webpack.config.js文件这是默认名称。
i.一个入口一个出口（一个js文件打包成一个）
const path=require(‘path‘);//path默认
module.exports={
mode:"development",//配置打包模式
entry:‘./src/index.js‘, //入口配置
output:{
path:path.resolve(__dirname,‘dist‘),//path必须是绝对路径
filename:‘main.js‘
}
}
ii.多入口一个出口（多个js文件打包成一个）
const path=require(‘path‘);//path默认 module.exports={ mode:"development",//配置打包模式 entry:[‘./src/index.js，‘./src/index2.js‘], //入口配置 output:{ path:path.resolve(__dirname,‘dist‘),//path必须是绝对路径 filename:‘main.js‘ } }
iii.多入口多出口（多个文件打包成多个）
const path=require(‘path‘);//path默认
module.exports={
mode:"development",//配置打包模式
entry:{
index:‘./src/index.js‘,
index2:‘./src/index2.js‘
}, //入口配置
output:{
path:path.resolve(__dirname,‘dist‘),//path必须是绝对路径
filename:‘main_[name].js‘
}
}
然后我们直接输入webpack就能打包了。
（10）webpack-dev-server服务
我们目前为止每写一次就要打包一次为了解决这个办法我们安装一个服务，安装命令：npm install webpack-dev-server -g全局只安装一次就行了，然后在目录下安装webpack-dev-server
这个时候我们在地址栏输入这个文件就能打开文件，但是我们更改内容的时候刷新浏览器并不能直接刷新内容，然后我们再指定一下输出路径：webpack-dev-server --output-public-path dist
这时候在更改文件内容，浏览器会自动刷新。
---恢复内容结束---
一、webpack官方地址：https://www.webpackjs.com/
二、webpack是什么？webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。特点：代码拆分 loader转换器 智能分析 插件系统 快速运行。
三、安装步骤：
1.在全局安装webpack，安装之前需要先安装node.js可以在命令提示符查看node版本
显示我的node版本是v10.8.0
2.接下来开始安装webpack
（1）首先我们安装一个全局的webpack
npm install webpack -g
（2）然后安装命令行 npm install -g webpack-cli
由于我安装的时候出现问题所以我百度了一些找到一个解决办法就是两个卸载命令行的命令 npm remove webpack-cli 或 npm remove webpack-command
（3）查看webpack版本 webpack -v 查看cli版本 webpack-cli -v
（4）接下来创建一个文件夹webpack项目在任意文件夹下或者任何一个盘下面
我在D盘下创建了一个叫mywebpack的文件夹（注：文件夹名不要叫webpack）
（5）创建一个package.json文件用于保存项目版本，依赖关系。
在当前目录使用命令提示符命令创建 npm init或手动创建
首先跳到我新建的目录下，然后输入npm init
然后出现这个界面，一直按Enter键
当跳回这个地址时我们的package.json文件就建好了
这时打开文件夹就能看到这个我们用命令行创建的package.json包。
（6）接下来在当前目录下安装webpack npm install webpack --save-dev（注意前面说的项目目录不要用webpack否则这里报错）
安装过程可能有点慢，等待就好了。
安装好了，然后我们查看一下项目文件
当当当~~~又出现两个文件说明我们成功了
（7）然后我们创建一个目录名为src的文件夹 然后创建一个index.js文件写一些内容
（8）然后我们直接运行webpack --mode development或者webpack --mode production这样会默认进行打包，入口文件是‘./src/index.js‘（./是指当前目录，src是我们创建的目录，index.js是我们自己创建的文件）输出路径‘./dist/main.js‘ （development和production production不支持监听，producton侧重于打包后的文件大小 development侧重于构建的速度）
这样我们就成功了
生成默认文件然后我们创建一个index.html引入我们打包后的main.js文件输出看一下
（9）我们也可以不使用development 默认打包 我们自己创建一个webpack.config.js文件，在项目根目录下新建一个webpack.config.js文件这是默认名称。
i.一个入口一个出口（一个js文件打包成一个）
const path=require(‘path‘);//path默认
module.exports={
mode:"development",//配置打包模式
entry:‘./src/index.js‘, //入口配置
output:{
path:path.resolve(__dirname,‘dist‘),//path必须是绝对路径
filename:‘main.js‘
}
}
ii.多入口一个出口（多个js文件打包成一个）
const path=require(‘path‘);//path默认 module.exports={ mode:"development",//配置打包模式 entry:[‘./src/index.js，‘./src/index2.js‘], //入口配置 output:{ path:path.resolve(__dirname,‘dist‘),//path必须是绝对路径 filename:‘main.js‘ } }
iii.多入口多出口（多个文件打包成多个）
const path=require(‘path‘);//path默认
module.exports={
mode:"development",//配置打包模式
entry:{
index:‘./src/index.js‘,
index2:‘./src/index2.js‘
}, //入口配置
output:{
path:path.resolve(__dirname,‘dist‘),//path必须是绝对路径
filename:‘main_[name].js‘
}
}
然后我们直接输入webpack就能打包了。
（10）webpack-dev-server服务
我们目前为止每写一次就要打包一次为了解决这个办法我们安装一个服务，安装命令：npm install webpack-dev-server -g全局只安装一次就行了，然后在目录下安装webpack-dev-server
这个时候我们在地址栏输入这个文件就能打开文件，但是我们更改内容的时候刷新浏览器并不能直接刷新内容，然后我们再指定一下输出路径：webpack-dev-server --output-public-path dist
这时候在更改文件内容，浏览器会自动刷新。
webpack学习笔记（1）---2018.08.11（12:39） 今日晴
原文：https://www.cnblogs.com/jxh-blog/p/9459737.html