webpack使用

几种常见的打包工具

grunt:https://www.gruntjs.net/

gulp:https://www.gulpjs.com.cn/

fis3(百度):http://fis.baidu.com/

webpack:https://webpack.js.org/ 成功案例：vue脚手架，react脚手架,angular脚手架

webpack是什么：是一种静态资源构建，打包的工具

会wepbakc的前置知识：会用node.js安装一个包( npm install xxxx --save-dev)
webpack核心

1 - entry:入口
2 - output:出口
3 - loader:资源转换器
4 - plugin:插件
5 - mode:模式

创建一个项目目录：webpack_vue
创建一个package.json文件

npm init -y

 1 3.   安装webpack,webpack-cli
 2 
 3    npm install webpack webpack-cli --save-dev
 4    简写：
 5    npm i webpack webpack-cli -D
 6 
 7 检测是否安装成功：
 8 
 9     ./node_modules/.bin/webpack -v
10     通过package.json中的scripts脚本来测试   
11     http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html
12 
13 4.在项目根目录下创建一个src，并建立一个index.js
14 
15 5.在项目根目录下运行npm run build
16 
17    会构建成一个dist目录，并生成一个main.js文件
18 
19  wabpack4.x 默认是零配置：
20 
21   即默认的入口：src/index.js
22     默认的出口：dist/main.js
23 
24     手动配置：
25 
26      入口：src/main.js
27      出口：dist/bundle.js
28 
29 6.如果手动配置，必须要创建webpack配置文件，来执行
30 
31    默认webpack配置文件：webpack.config.js
32 
33    黄色警告如何解决：通过配置mode
34    如何自动清理打包的垃圾文件：
35 
36    第一步：   npm install --save-dev clean-webpack-plugin
37 
38    第二步： 在webpack.config.js中引入
39 
40        const { CleanWebpackPlugin } = require('clean-webpack-plugin');
41 
42     第三步：通过plugins实例化
43 
44             module.exports = {
45                ...
46                 plugins: [
47                 new CleanWebpackPlugin(),
48         
49                 ......
50             };
51 
52    基于webpack的服务器环境：webpack-dev-server;
53 
54    npm install webpack-dev-server -D
55 
56    通过devServer来配置:port,baseContent
57 
58      devServer: {
59             port: 9999,
60             contentBase: path.join(__dirname, 'dist'),
61         }
62 
63    如何实现自动构建构的文件自动注入index.html:
64 
65     安装html-webpack-plugin
66 
67     npm install html-webpack-plugin
68 
69     引入：
70 
71     const HtmlWebpackPlugin = require('html-webpack-plugin');
72 
73     添加到plugins中：
74 
75      plugins: [
76          。。。
77         new HtmlWebpackPlugin({
78             template: './index.html',  //读取模板的入口文件
79             filename:'index.html'  //生成打包后的html文件
80         }),
81     ]
82         
83 
84 
85  
86 
87 说明：webpack可以将node服务端的JS代码通过构建直接运行在浏览器上
88 
89 webpack支持多种模块化规范：AMD,CMD,CommonJS,ES6 modules
90 
91 webpack默认识别的文件：.js,.json文件格式
92 
93 
94 loader：让webpack识别其他类型的文件，例如：css,png,svg,less,sass.....
95 
96  识别css:style-loader,css-loader