webpack起步以及手动配置config文件

第一步：创建项目文件夹

mkdir webpack-vue

第二步：使用vscode打开文件夹，经行npm初始化

npm   init    -y

第三步：下载项目需要资源包

 生产环境   vue

　　npm install --save vue

　　开发环境　　webpack

　　1. 他是基于nodeJs，所以要确保安装了nodeJs --save-dev工具类型加dev

　　2. npm install --save-dev webpack 或者 npm install --save-dev webpack@<version> （提供核心功能）

　　3. npm install --save-dev webpack-cli(提供命令命令行)或者npm install --save-dev webpack-command

　　注意4.x以上的webpack才需要安装webpack-cli

第四步：在项目文件夹（webpack-vue）里面创建一个src文件夹，用来存放源文件（source）

//在src文件里面创建一个入口js--->index.js
var a=0;
alert(a);

第五步：在项目根目录创建一个index.html文件，作为入口文件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     <h1>我是入口文件</h1>
11 </body>
12 </html>

第六步：安装需要使用的插件

1.  找到需要使用插件并安装他
    -   命令：npm install --save-dev  html-webpack-plugin
2.  在webpack.config.js中引入他
    -   const   HtmlWebpackPlugin=require('html-webpack-plugin')
3.  在plugins选项中调用他，并按照他的文档中区做配置
    -   //插件，将index.html文件自动打包到dist文件夹里面
                plugins:[
                    //自动生成一个index.html文件在出口位置，并且会自动在生成的文件中引入打包的js文件
                    new HtmlWebpackPlugin({});
                ]

第七步：在项目根目录创建一个webpack.config.js文件（这是一个webpack的配置文件）

/**
五大核心
0. 模式 指定这次打包是大的开发环境用的包（不压缩），还是生产环境的包（压缩）。4.x版本的webpack支持的
1. 入口 指定webpack需要打包的项目的入口文件
2. 出口 打包之后生成的文件需要放到哪个位置
3. 加载器 默认情况下，webpack只是简单的打包js文件，如果需要打包css，img之类的文件则需要添加相对应的加载器，去处理这种类型的文件。
4. 插件 插件是加载器干不了的事情，就可以使用插件来干.

ps: 前三个，模式，入口，出口。必须配置
*/

//如何配置
//1. 就是在webpack.config.js文件中，暴露一个对象，使用commonjs方式暴露

 1 /**
 2  * 1.模式：开发或者生产模式（4.x版本的webpack才分模式）
 3  * 2.入口
 4  * 3.出口
 5  * 4.插件
 6  * 5.加载器
 7  * ps：123必须配置
 8  */
 9 
10 //  引入nodejs内置模块path
11 const path = require('path');
12 //  引入webpack的插件HtmlWebpackPlugin，需要安装：npm i --save-dev html-webpack-plugin
13 const HtmlWebpackPlugin = require('html-webpack-plugin')
14 
15 // 将这个文件暴露出去
16 
17 module.exports = {
18     // 模式
19     mode: 'development', //production(生产模式)
20 
21     // 入口(从何处开始打包)
22 
23     entry: './src/index.js', //就是入口js文件路径。可以是绝对路径也可以是相对路径
24 
25     // 出口（打包的文件放在哪）
26 
27     output: {
28         //必须是绝对路径,打包之后会再这个路径下创建一个dist文件夹
29         path: path.resolve(__dirname, './dist'),
30         // 设置打包之后的文件名
31         filename: 'bundle.js'
32     },
33 
34     // 插件
35 
36     plugins:[
37         /**
38          * 1.因为是插件，可能由多个，所以使用数组类型
39          * 2.自动生成一个index.html文件在出口位置（dist文件夹里面），并且自动在生成的文件中引入js文件
40          * 3.详细配置可以在webpack官网的插件选择里面找到
41          * 4.https://github.com/jantimon/html-webpack-plugin#configuration
42          */
43 
44         /**
45          * HtmlWebpackPlugin插件
46          * 将index.html入口html文件自动打包到dist文件夹中
47          */
48          new HtmlWebpackPlugin({
49             filename:'entry.html',
50             //  让这个文件内容和根目录的html完全一致
51             template: './index.html'
52          })
53     ]
54 }

第八步：打包

  没有全局安装webpack要执行下列命令。否则直接$webpack
  1.  ./node_modules/.bin/webpack
  2.  npx webpack(npm 5.x+新增的功能)
  3.  配置package.json的npm脚本

项目目录

项目的目录结构
1  dist    （最终生成的文件，这个文件夹才是最终需要上传到服务器上的代码）
3   node_modules（放资源包）
4  src     (源文件，需要被webpack打包的文件，都需要放在这个文件夹下面，都是一些自己写的项目模块)
    -   index.js    （这个是项目打包入口）
5   index.html  （这个是我们的项目页面入口）
6  packge-lock.json(包锁文件)
7  packge.json（项目依赖的资源包与项目的描述信息的文件）
8  webpack.config.js(webpack的配置文件)

上面三个文件，这三个文件都不是真正需要上线（将项目放到服务器）的内容。于是我们需要webpack打包（抽取其中真真需要用的内容）