zoukankan      html  css  js  c++  java
  • 前段自动化工具webpack

    一,webpack基础
    学习网站:https://www.webpackjs.com/
    简介:
    本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
    1,两种安装方式
    webpack 的安装依赖 nodejs 的npm,安装完node.js,可以使用npm,但是npm安装速度表较慢,所以可以安装淘宝的国内npm源 cnpm:
    npm i -g cnpm --registry=https://registry.npm.taobao.org
    1)全局安装
    命令:cnpm 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
    cnpm i --save-dev webpack-cli
    对于大多数项目,推荐本地安装,当体验如依赖时,更容易分别升级项目
    当我们进行了本地安装,我们可以在 node_module/.bin/webpack 文件夹中访问
    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_modules
    + |-index.html
    + |-/src
    + |-index.js
    解构说明:
    index.html 是项目主入口文件,index.js 是主入口打包文件,所有与index.js 相关的依赖都会被打包
    2,引入依赖(打一个包)
    项目目录:
    webpack-demo1
    |-package.json
    |-/node_modules
    + |-/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_modules
    + |-/dist
    + |-index.html
    + |-/src
    + |-index.js
    + |-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')
    },
    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"
    }

    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 './开饭了.jpeg';
    img.src = fan;
    注:css或js 一旦被打包,其中引入的图片也会被打包到dist文件夹,文件没有压缩,但是文件名改了
    7,打包字体图标
    使用 file-loader
    进入webpack.config.js 中,在rules中添加:
    {
    // 字体图标文件打包配置
    test: /.(eot|woff|woff2|ttf|svg)$/,
    use: ['file-loader']
    }

    8,加载数据文件(json)
    json,xml,csv,tsc...
    json 文件默认是支持的,不需要插件
    import data from './json.json';
    安装xml-loader 和 csv-loader
    cnpm i --save-dev xml-loader csv-loader
    进入webpack.config.js 中,在rules中添加:
    {
    // 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('!style-loader!css-loader!../css/myStyle.css');
    创建依赖模块:
    1)创建一个js文件 data.js
    这个js文件就是一个模块
    var json = {
    str:"我是data模块中的数据"
    }
    module.exports = json;
    2)在index.js 中引入模块
    var d = 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',
    alert: './src/alert.js'
    },

    index: './src/index.js',
    // 配置打包后的文件及文件位置
    output: {
    filename: "[name].bundle.min.js",
    // __dirname 当前文件夹路径
    path: path.resolve(__dirname, 'dist')
    },

    npm run build
    3,自动更新打包
    watch:true 可以监听打包
    自动打包插件可以做到自动打包,还可以做到自动修改inde.html 中引入的bundle包,不能监听
    安装插件:
    cnpm i --save-dev html-webpack-plugin
    进入webpack.config.js 中配置:
    0 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(), //自动清理dist文件夹
    ]

    此插件会将非打包内容全部删除,包括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 //端口号
    }
    }

    进入package.json 添加脚本:
    "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build_w": "webpack",
    "build": "webpack --config webpack.config.js",
    "watch": "webpack --watch",
    + "server": "webpack-dev-server --open"
    },

    npm run server 启动本地服务器

  • 相关阅读:
    记一次坑爹的jconsole使用
    触发Full GC的时机
    java NIO之Selector
    java NIO之SelectedKey
    java泛型中的各种限制
    filebeat安装部署
    Kibana安装及简单使用
    elastucasearch基础理论以及安装
    Salt 与Salt API配置
    RabbitMQ 相关理论部分
  • 原文地址:https://www.cnblogs.com/txf-123/p/11550517.html
Copyright © 2011-2022 走看看