webpack的安装与使用（一）

一，webpack安装
    两种安装方式
        1）全局安装
            命令：npm install --global webpck
            可在全局环境下使用webpack
            注意：
                不推荐，全局安装会锁定版本，如果在使用不同 webpack版本的项目中，可能导致构建失败
        2）本地安装
            当前最新版本 4.16.1
            以下命令可以在本地安装最新的稳定版本，或者指定版本
                npm install --save-dev webpack
                npm install --save-dev webpack@<version>
             如果使用webpack4.0+版本，需要安装CLI
                npm install --save-dev webpack-cli
             对于大多数项目，推荐本地安装，当引入其他的依赖时，更容易分别升级项目
             当进行了本地安装，我们可以在node_module/.bin/webpack文件夹中访问他的bin版本，本地安装就是在当前项目中进行构建，其他项目不能使用
 二，打包教学
        1，创建项目目录，初始化npm,本地安装webpack,安装webpack-cli,命令如下：
            1， mkdir webpack-demo && cd webpack-demo
            2，npm init -y
                会出现：
                   Wrote to C:\xampp\htdocs\zxl\H5高级--Vue实战开发\dayF-webpack\课堂案例\webapack-demo\package.json:

                   {
                     "name": "webapack-demo",
                     "version": "1.0.0",
                     "description": "",
                     "main": "index.js",
                     "scripts": {
                       "test": "echo \"Error: no test specified\" && exit 1"
                     },
                     "keywords": [],
                     "author": "",
                     "license": "ISC"
                   }
            3，npm install webpack webpack-cli --save-dev
             目录结构：
                webpack-demo
                    |-package.json
                    |-node-module
                   +|-index.html
                   +|-/src
                     +|-index.js
        2,打一个bundle包
                webpack-demo
                        |-package.json
                        |-node-module
                       +|-dist
                         +|-index.html
                       -|-index.html
                       +|-/src
                         +|-index.js
            因为index.js 依赖了lodash,所以我们需要本地安装lodash
                npm install --save lodash
            安装工具库：jquery
                npm install jquery --save
                注意：
                    mac出现权限问题，前边加sudo
        3.使用配置文件创建bundle
                webpack 4以后的版本,不需要配置文件即可打包,很多项目比较复杂的设置可以在配置文件中配置,相比在终端输入大量命令更加高效,所以我们可以创建一个能够取代以上使用cli选项方式的配置文件：
                目录结构：
                    webpack-demo
                        |-package.json
                        |node-modules
                      + |-webpack.config.js
                        |-dist
                          |-index.html
                        |-/src
                          |-index.js
                配置文件中的内容：
                    const path = require('path');
                    module.exports = {
                        //将'./src/index.js'打包到dist文件夹中的bundle.js
                        entry: './src/index.js',
                        output: {
                            filename: 'bundle.js',
                            path: path.resolve(__dirname, 'dist')
                        }
                    };
                终端执行配置文件：
                    npx webpack --config webpack.config.js
            4. npm 脚本   (NPM script)
                考虑到使用webpack-cli运行本地webpack不方便,我们可以设置一个快捷方式
                在package.json中添加npm脚本
                "scripts": {
                    "test": "echo \"Error: no test specified\" && exit 1",
                    "build":"webpack --config webpack.config.js",
                    "build-d":"webpack"
                  },
                  此时可以使用npm run build 或者npm run build-d 替代 npx webpack --config webpack.config.js
            5，打包css文件
                    根目录创建css文件夹，创建myStyle.css
                    如果要将样式表打包到bundle.js中,需要webpack对样式表支持
                    命令如下:
                        npm install css-loader style-loader --save -dev
                        mac权限问题:sudo
                        css-loader:遍历样式,如果发现有import导入css文件,就会将css文件引入进来
                        style-loader:将样式通过style直接插入页面头部

                        在index.js中加入:require('!style-loader!css-loader!../css/myStyle.css');

                        手动配置打包依赖,使用import引入
                            index.js 加入:
                                import './sty.css';
                            webpack.config.js 修改如下:
                                .....,
                                module:{
                                     rules:[
                                          {
                                               test:/\.css$/,
                                               use:[
                                                   'style-loader',
                                                   'css-loader'
                                               ]
                                          }
                                     ]
                                }
                6,打包图片
                    使用file-loader 可以轻松的将图片加入到js和css中
                    命令:
                        npm install --save-dev file-loader
                    在webpack.config.js中的rules数组中加入新的对象:
                        ,
                        {
                            test:/\.(png|svg|jpg|gif)$/,
                            use:[
                                'file-loader'
                            ]
                        }
                    可以在css中使用该图片,在index.js中使用该图片需要先引入:
                        import dog from '555.jpg';
                    下边使用dog就是图片的路径
                7,加载字体
                    使用file-loader
                    在webpack.config.js中的rules数组中加入新的对象:
                        ,
                            {
                                test:/\.(woff|woff2|eot|ttf|otf)$/,
                                use:[
                                    'file-loader'
                                ]
                            }
                8，加载数据文件
                    json,xml,csv,tsv.....
                    json文件是默认支持的，不需要创建：
                        import data from './data.json'
                    安装csv-loader和xml-loader:
                        npm install --save-dev csv-loader xml-loader
                    在webpack.config.js中的rules数组中加入新的对象:
                        ,
                        {
                            test:/\.(csv|tsv)$/,
                            use:[
                                'csv-loader'
                            ]
                        },{
                            test:/\.xml$/,
                            use:[
                                'xml-loader'
                            ]
                        }
                    在index.js中：
                        import xml from './data.xml';
                9，模块的依赖关系
                    打包文件载入依赖文件：
                        require()
                        eg:
                            var $=require('jquery');
                            require('!style-loader!css-loader!./css.css');
                            var json=require('./data.json');
                    创建依赖模块：
                        创建一个data.js
                            var json={
                                str:'我是data文件中的数据'
                            };
                            module.exports=json;
                        在index.js文件中引入该模块：
                            var json=require('./data.js');
                        创建一个fun.js，功能函数：
                            function fun(name) {
                                alert('我是'+name+'我来自fun');
                            }
                            module.exports=fun;