前端自动化工具webpack

前端自动化工具webpack(详细教程)

一、webpack基础

**学习网站：https://www.webpackjs.com/**


1、两种安装方式

    webpack的安装依赖nodejs的npm，安装完nodejs，可以使用npm，但是npm安装的速度比较慢，所以可以安装淘宝的国内npm源 cnpm:
        npm i -g cnpm --registry=https://registry.npm.taobao.org
    1）全局安装
        命令：npm i -g webpack
            i:install   -g:--global
        可以在全局状态下（任何文件夹）使用webpack
        注意：不推荐安装全局，全局安装会锁定版本，如果在使用不同webpack 版本的项目中，可能会导致构建失败
    2)本地安装
         当前最新版本应该是4.20.2
         本地安装 就是将webpack安装到特定的文件夹内，那么我们就只能在当前文件夹使用，其他文件夹不能使用
         本地安装命令：
            安装最新稳定版本：cnpm i --save-dev webpack
            安装特定版本：cnpm i --save-dev webpack@<version>
                        eg: cnpm i --save-dev webpack@4.16.1
            如果你安装的是webpack4.0+的版本，还需要安装webpack-cli
                npm i --save-dev webpack-cli
            对于大多数项目，推荐本地安装，当体验如依赖时，更容易分别升级项目
            当我们进行了本地安装，我们可以在   node_module/.bin/webpack  文件夹中访问
        本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
    3)package.json
        当前项目（当前文件夹下）安装的所有依赖配置文件，另外可以设置脚本执行依赖(vue),当node_modules 所有依赖被删除，可以使用该文件重新下载所有依赖：cnpm i
        下载依赖时使用：--save-dev 即可将当前下载的依赖写进package.json
        package.json 可以使用npm生成：npm init 一路回车即可

二、webpack 打包教程

1、创建项目
    创建项目目录，初始化项目 npm init 生成我呢见package.json ,安装webpack webpack-cli 命令如下：
    mkdir webpack-demo1
    cd webpack-demo1
    npm init -y
    cnpm i --save-dev webpack webpack-cli jquery@1.12.3
当前项目目录：
    webpack-demo1
        |-package.json
        |-/node_module
       +|-index.html
       +|-/src
            +|-index.js
    解构说明：
        index.html是项目主入口文件，index.js是主入口打包文件，所有与index.js相关的依赖都会被打包
2、引入依赖（打一个包）
    项目目录：
     webpack-demo1
        |-package.json
        |-/node_module
       +|-/dist
            +|-index.html
       -|-index.html
       +|-/src
            +|-index.js
        dist:项目真正文件夹，放置打包后的所有内容
        使用npm 安装的内容都放在node_modules 文件夹中，再js中使用时使用require引入
        打包使用webpack-cli:npx webpack
            npx webpack 命令打包时，默认以src 文件夹中的index.js 为入口，打包后默认以dist文件夹中的main.js为打包结果
3、打包配置文件
    webpack4 以后的版本，不需要配置文件可以默认打包，但是很多项目比较复杂，需要在配置文件中设置很多内容，相比终端输入大量命令更加高效，所以我们可以创建一个能够取代cli打包配置的文件
    项目目录：
          webpack-demo1
        |-package.json
        |-/node_module
       +|-/dist
            +|-index.html
       -|-index.html
       +|-/src
            +|-index.js
       +|-webpack.config.js
    配置文件基本内容：
        const path = require('path');//系统自带的path模块
        module.exports = {
            //配置打包的入口js文件
            entry:'./src/index.js',
            //配置打包后的文件及文件位置
            output:{
         filename:"bundle.js",
            //__dirname 当前文件夹路径
            path:path.resolve(__dirname,'dist')
        }
    }
    watch: true //打包监听状态，一旦index.js文件中内容变化，保存，立即重新打包
    使用打包配置文件打包：
        npx webpack --config webpack.config.js
4,npm脚本 （npm script）
    目前没有脚本的情况下，打包使用：npx webpack --config webpack.config.js
    我们觉得很麻烦，所以我们可以使用npm脚本进行打包：
        在package.json中，找到scripts，添加脚本：
         "scripts": {
                "test": "echo \"Error: no test specified\" && exit 1",
                "build_w": "webpack",
                "build": "webpack --config webpack.config.js"
        },
    执行命令：npm run build 就相当于运行了：npx webpack --config webpack.config.js
5、打包css文件
    创建css文件，myStyle.css
    想要打包css，首先需要webpack对css的样式表支持：
        命令：
            cnpm i --save-dev css-loader style-loader
        mac:加sudo cnpm
        css-loader:遍历样式表，如果发现有import导入css的文件，就将css文件引入进来
        style-loader：将样式通过style 标签 直接插入到文档的头部
    1)第一种方式
        在index.js种引入语法：
            require('!style-loader!css-loader!../css/myStyle.css')
    2)第二种方式
        手动配置打包依赖，在webpack.config.js种添加：
            const path = require('path');//系统自带的path模块
            module.exports = {
                //配置打包的入口js文件
                entry: './src/index.js',
                //配置打包后的文件及文件位置
                output: {
                    filename: "bundle.min.js",
                    //__dirname 当前文件夹路径
                    path: path.resolve(__dirname, 'dist')
                },
                module:{
                    rules:[
                        {
                            //配置css-loader和style-loader
                            test:/\.css$/,
                            use:['style-loader','css-loader']
                        }
                    ]
                },
                watch: true //打包监听状态，一旦index.js文件中内容变化，保存，立即重新打包
            }
        然后再index.js中：
            import './style.css';
        重新打包
6、打包图片
    使用file-loader 可以轻松的将图片打包加入到js和css中
    命令：
        cnpm i --save-dev file-loader
    进入webpack.config.js中，在rules中添加：
        {
            //配置图片加载
            test: /\.(png|svg|jpg|jpeg|gif)$/,
            use: ['file-loader']
        }
    在相关的css中就可以引入图片
    进入index.js中也可以引入图片：
        import fan from './***.png';
        img.src = fan;
    注：css或js一旦被打包，其中引入的图片也会被打包到dist文件夹，文件没有压缩，但是文件名改了
7、打包字体图表
    使用flie-loader
    进入webpack.config.js中，在rules中添加
8、加载数据文件（json）
    json,xml,csv,tsc...
    json 文件默认是支持的，不需要插件
        import data from './json.json';
    安装xml-loader 和 csv-loader
        cnpm i --save-dev xml-loader csv-loader
            {
                //xml打包设置
                test: /\.xml$/,
                use: ['xml-loader']
            }, {
                //csv,tsv打包设置
                test: /\.(csv|tsv)$/,
                use: ['csv-loader']
            }
        xml使用：
            import xml from './xml.xml';
9、模块依赖打包
    打包文件载入依赖文件（如果打包的文件引入了其他模块，则会将其他模块一并打包）：
        require()
        eg:var $ = require('jquery');
        require('!syle-loader!css-loader!../css/myStyle.css')
    创建依赖模块：
        1）创建一个js文件， data.js
            这个js文件就是一个模块
            var json = {
                str:"我是data模块中的数据";
            }
            module.exports = json;
        2)在index.js中引入模块
            var b = require('./data.js');
    创建一个函数模块，在index.js中引入该模块，调用模块中的函数传入自己的名字，输出xxx你好，欢迎进入

三、打包处理

1、打包输出管理
    index.html 根据项目的需求可能需要引入多个功能模块，那么主程序引入多个bundle包，所以我们需要对多个功能模块进行打包，并引入
2、多个功能模块同时打包
    创建功能模块 print.js
    同时打包index.js 和 print.js
        entry: {
            index: './src/index.js',
            print: './src/print.js'
        },
        //配置打包后的文件及文件位置
        output: {
            filename: "[name].bundle.min.js",
            //__dirname 当前文件夹路径
            path: path.resolve(__dirname, 'dist')
        },
    npm run build
3、自动更新打包
    watch:true  可以监听打包
    自动打包插件也可以做到自动打包，还可以做到自动修改index.html中引入的bundil包
    安装插件：
        cnpm i --save-dev html-webpack-plugin
    进入webpack.config.js 中配置:
    const HtmlWebpackPlugin = require('html-webpack-plugin')
        ...
        module:{},
        plugins: [
            new HtmlWebpackPlugin({
                title: '输出管理'
            })
        ]
    npm run build   即可生效
    作用：
        将打包的内容自动引入进index.html,并且根据打包名称的行动改变index.html内容，会影响我们自己写的内容，所以不建议使用
4、自动清理dist文件夹
    将没有用的bundle包清理掉
    下载插件：
        cnpm i --save-dev clean-webpack-plugin
    进入webpack.config.js文件修改：
        const { CleanWebpackPlugin } = require('clean-webpack-plugin')
        ...
        module:{},
         plugins: [
            new CleanWebpackPlugin(),//自动清理
        ],
    此插件会将非打包内容全部删除，包括html文件，不建议使用
    npm run build     启动
5、打包内容错误定位     source  map
    bundle 包会主动将文件以及依赖的文件打包在一起，并且对代码进行压缩(变成一行)和混淆（变量和内容更换），如果代码中有错误，那么浏览器报错之后能找到的就只有一行，无法定位错误位置
    js自带功能：inline-source-map
    注意：此功能仅仅用于开发环境的解释说明，不可用于生产环境
    进入webpack.config.js 添加：
        module.exports = {
            ...
            devtool: 'inline-source-map',
        }
    npm run build
6、观察者模式自动构建打包
    watch
    使用npm run build 打包，每次当内容变化都要重新打包，可以使用watch进行打包监听，有两种方案：
        1）在webpack.config.js中设置
            module.exports={
                ...
                watch:true
            }
            打包监听状态，一旦index.js文件中内容变化，保存，立即重新打包
        2）在package.json中添加脚本
             "scripts": {
                "test": "echo \"Error: no test specified\" && exit 1",
                "build_w": "webpack",
                "build": "webpack --config webpack.config.js",
             +   "watch":"webpack --watch"
            },
            npm run watch
            研究题：浏览器跟随代码变化自动刷新
7、webpack 自带的简单本地服务器
	webpack-dev-server
    作用：实现实施重载，实时打包，自动打开浏览器，浏览器内容自动更新
    下载插件：
        cnpm i --save-dev webpack-dev-server
    进入webpack.config.js中配置:
        module.exports = {
            ...
            devServer: {
                contentBase: './dist',//根目录
                port: 8888//端口号
            }
        }
         "scripts": {
            "server": "webpack-dev-server --open"
        },

npm run server 启动本地服务器

									***个人心得，仅供参考***