为了账号安全,请及时绑定邮箱和手机立即绑定

webpack深入与实战

难度中级
时长 3小时21分
学习人数
综合评分9.60
249人评价 查看评价
9.8 内容实用
9.5 简洁易懂
9.5 逻辑清晰
  • 命令行指定loader处理css文件

    16:02
    看视频
  • 1.前端打包工具 2.可以加载指定的页面资源
    02:30
    看视频
  • 1、babel-loader: es6 转es5。 需要安装 babel-loader 和 @babel/core和 babel-preset-latest

    2、css-loader:使得webpack可以处理css文件,style-loader 将处理好的css文件新建一个<style>标签插入<head>中,less-loader或者sass-loader等处理预处理文件。postcss-loader处理浏览器兼容。

    3、html-loader、vue-loader等处理模板文件

    4、file-loader、url-loader、image-loader 处理图片,其中image-loader可以压缩图片。


  • 多页面配置,多个入口文件引用:

    entry: {

            main: './src/script/main.js',

            a: './src/script/a.js',

            b: './src/script/b.js',

            c: './src/script/c.js',

        },


    需要生成 a.html, b.html, c.html,这三个共用一个 index.html 模板。生成三个,就要初始化三个htmlWebpackPlugin实例。

    plugins: [

            new htmlWebpackPlugin({

                filename: 'a.html',

                template: 'index.html',

                title: 'this is a.html',

                chunks: ['main', 'a']

            }),

            new htmlWebpackPlugin({

                filename: 'b.html',

                template: 'index.html',

                title: 'this is b.html',

                chunks: ['b']

            }),

            new htmlWebpackPlugin({

                filename: 'c.html',

                template: 'index.html',

                title: 'this is c.html',

                chunks: ['c']

            })

        ]

    然后模板都是template: 'index.html',

    filename是生成的文件名,所以是a.html, b.html, c.html.   

    chunks: 选项是指定加载的js文件。


    这样,就完成了一个入口文件(index.html)生成多个出口文件了(a.html,  b.html,  c.html), 具体怎么把这三个文件的内容变得自由控制,还没讲到。目前除了标题还是统一的。


  • 避免每次打包生成新的文件,需要每次手动修改index.html 引入打包文件的路径名称,使用了html-webpack-plugin 插件。

    使用时候先require引入

    var htmlWebpackPlugin = require('html-webpack-plugin');

    使用插件

    plugins: [ new htmlWebpackPlugin() ]

    然后重新打包,npm run webpack 

    报错了: Cannot read property 'make' of undefined.......

    解决办法是,安装别的版本的插件:

    卸载:

    npm uninstall html-webpack-plugin

    安装:

    npm install html-webpack-plugin@2.30.1 --save-dev

    重新打包:

    npm run weboack

    安装插件真的是一个坑,报错就重新装一遍,不行换个版本再试试!

  • webpack 3.12.0中 path需要一个绝对路径,所以需要改动一下:

    var path = require('path');

    module.exropts = {

        entry: './src/script/main.js',

         output: {

                path: path.resolve(__dirname, './dist/js'),

                filename: 'bundle.js'    

        }

    }

  • 第一:

    webpack如何在命令行中安装:

    第一步全局安装: cnpm install -g webpack@1.13.2 ( 最新版本坑 ,所以安装了老师视频里的版本)

    第二步项目安装:cnpm install --save-dev webpack@1.13.2(同上)

    第二:

    学习直接在命令行中使用webpack对一个js文件进行打包

    第三:

    学习如何在js文件中引用css,并且使得css在html中生效(使用了 style-loader!css-loader!.style.css),其中css-loader是使得webpack可以处理.css文件,style-loader 是把处理完的文件,新建一个<style></style>标签,插入到<head></head>中

    第四:

    学习了webpack的高级参数,优化打包



  • --watch 自动更新

    --progress 看到打包过程的进度

    --display-modules 列出打包的各模块

  • webpack hello.js hello.bundle.js --module-bind css=style-loader!css-loader

    不用加引号,不然报错

  • const webpack = require('webpack');

    const path = require('path');

    const glob = require('glob');  //返回正则路径下所有匹配的文件

    const htmlWebpackPlugin = require('html-webpack-plugin');

    const CleanWebpackPlugin = require('clean-webpack-plugin');

    //__dirname为当前路径

    // path.resolve:方法会把一个路径或路径片段的序列解析为一个绝对路径

    //path.join():方法使用平台特定的分隔符[Unix系统是/,Windows系统是\ ]把全部给定的 path 片段连接到一起,并规范化生成的路径。若任意一个路径片段类型错误,会报错

    // ** : 和 * 一样,可以匹配任何内容,但**不仅匹配路径中的某一段,而且可以匹配 'a/b/c' 这样带有'/'的内容,所以,它还可以匹配子文件夹下的文件.

    let DISR_PATH = path.resolve(__dirname, '../dist');

    let SRC_PATH = path.resolve(__dirname, '../src');

    // console.log(SRC_PATH)


    let entryFiles = {}; //入口文件

    let pluginAll = []; //放所有插件

    // var filesTest = path.join(SRC_PATH + '/**/*.js');

    // console.log(filesTest);

    //[\s]表示只要出现空白就匹配

    //[\S]表示非空白就匹配


    let jsFiles = glob.sync(SRC_PATH + '/**/*.js');

    jsFiles.forEach((file, index) => {

    let subkey = file.match(/src\/(\S*)\.js/)[1];

    entryFiles[subkey] = file;

    })

    console.log(jsFiles);

    // console.log(entryFiles)


    let htmlFiles = glob.sync(path.join(SRC_PATH, '**/*.html'));

    console.log(htmlFiles)

    htmlFiles.forEach((page, index) => {

    let htmlConfig = {};

    let pageStr = page.match(/\/src\/(\S*)\.html/);

    let name = pageStr[1];

    console.log(name)

    htmlConfig = {

    filename: path.join(DISR_PATH, name + '[chunkhash:5].html'),

    title: name,

    template: path.join(SRC_PATH, name + '.html'),

    inject: 'head', //script放在html里面的位置 body head true(默认值) false

    hash: true,

    chunks: [name],

    date: new Date(),

    minify: {

    removeComments: true,

               // collapseWhitespace: true //压缩空格

    }

    };

       // 如果是index页面,需要添加common.js到页面中

    if (name === 'index/index') {

    htmlConfig.chunks = [name, 'common'];

    console.log(htmlConfig.chunks)

    }


    let htmlplugin = new htmlWebpackPlugin(htmlConfig);

    pluginAll.push(htmlplugin);

    })

    pluginAll.push(new CleanWebpackPlugin());

    module.exports = {

       // 入口js文件

       // entry: path.resolve(__dirname, '../src/index.js'), // 方式一

       // entry: [SRC_PATH + '/index.js', SRC_PATH + '/test.js'], //方式二

    entry: entryFiles,

       // 编译输出的路径

    output: {

    path: DISR_PATH,          //本地编译后地址

    filename: '[name][chunkhash:5].js',

           // publicPath: 'http://cdn.com', //上线地址

    },

       // 模块解析

    module: {


    },

       // 插件

    plugins: pluginAll,

    devServer: { // webpack启动一个开发服务器

    hot: true,  //热更新

    contentBase: DISR_PATH, //热启动当前路径

    port: 8011,  //服务端口

    host: '0.0.0.0', //host地址访问路径,

    open: true,

    useLocalIp: true, //是否在打包的时候用自己的ip

    historyApiFallback: true, //任意的 404 响应都可能需要被替代为 index.html

    proxy: {

    '/api': 'http://localhost:3000'

    },

    https: true

    }


    }


  • // 'off' 或 0 - 关闭规则

    // 'warn' 或 1 - 开启规则,使用警告级别的错误:warn (不会导致程序退出)

    // 'error' 或 2 - 开启规则,使用错误级别的错误:error (当被触发的时候,程序会退出)


    module.exports = {

    env: {

    worker: true,

    browser: true,

    commonjs: true,

    jquery: true,

    es6: true

    },

    globals: {

    $Fire: true,

    $UEE: true,

    $Page: true,

    $Controller: true,

    OC: true,

    grpAdUtilCtz: true,

    angular: true,

    adutil: true,

    dontTouchDataOfWholePage: true,

    youCanTouchDataOfWholePage: true,

    encryptWithRSA: true,

    Close_tabSet: true,

    srAdUtilCtz: true,

    VALIDATOR_EXCLUDEDCOMPARE: true,

    iemp: true,

    eview: true,

    $eview: true,

    BRANCH: true,

    showExceptionMessageWindow: true,

    piuACMenu: true,

    define: true,

    VASPOOL: true,

    __inline: true,

    PublicUtil: true,

    showExceptionMessageWindow: true,

    isCidr: true,

    cidrAddressIpv6: true,

    transitIp: true,

    isIPv6: true,

    ipv6ToBinary: true,

    initaddr: true,

    addZero: true,

    cidr2IpMask: true,

    maskNum2ip: true,

    num2dot: true,

    ipv6mask_int_to_string: true,

    ipv6_cmp: true,

    getType: true,

    deepClone: true,

    promiseAjax: true,

    cidrRemoveZero: true,

    checkIPv4Subnet: true,

    checkIPv6Subnet: true,

    ip2number: true,

    checkCidr: true,

    checkCidrIPv6: true,

    topology: true,

    InheritUtil: true,

    DrawUtil: true,

    CaculateUtil: true,

    ShadowUtil: true,

    DashedLine: true,

    eviewC: true,

    TopoNode: true,

    TopoLink: true,

    Util: true,

    seajs: true,

    topoCbbQuery: true,

    downloadExcel: true,

    Prel: true,

    },

    extends: 'eslint:recommended',

    parserOptions: {

    sourceType: 'module'

    },

    rules: {

    'no-self-compare': 2, // 禁止自身比较

    'brace-style': [2, '1tbs', {

    allowSingleLine: true

    }], // if while function 后面的{必须与if在同一行,java风格。

    'no-constant-condition': 0, //禁止在条件中使用常量表达式 if(true) if(1)

    'operator-linebreak': [2, 'before'], // 换行时运算符在行尾还是行首

    'linebreak-style': 0, //强制使用一致的换行风格

    "wrap-regex": 2, //要求正则表达式被括号括起来

    semi: [2, 'always'], // 语句强制分号结尾

    'no-multi-spaces': 1, // 不能用多余的空格

    'no-multiple-empty-lines': [1, {

    'max': 1

    }], //空行最多不能超过2行

    'eqeqeq': 2, // 必须使用全等

    'no-undef': 1, // 不能有未定义的变量

    'no-use-before-define': [2, {

    'functions': false

    }], // 禁止在变量定义之前使用它们

           // "max-statements": [1, 40], //    强制函数块最多允许的的语句数量

    'no-unneeded-ternary': 2, // 禁止可以在有更简单的可替代的表达式时使用三元操作符 var isYes = answer === 1 ? true : false;

    'semi-spacing': [2, {

    before: false,

    after: true

    }], //分号前后空格

           // 注释的斜线和星号后要加空格

    'spaced-comment': [2, 'always', {

    'block': {

    exceptions: ['*'],

    balanced: true

    }

    }],

    }

    };



  • webpack4 module 和babel的安装方法都有不同

    1,https://www.babeljs.cn/setup#installation

    npm install --save-dev babel-loader @babel/core

    module: {  rules: [    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }  ] }


    npm install @babel/preset-env --save-dev

    .babellrc 

    {  "presets": ["@babel/preset-env"] }

    重要的是看官网 cnpm和npm不要混用

    如果混用出现错误 把node-modules文件夹删掉

    重新 npm install

首页上一页1234567下一页尾页

举报

0/150
提交
取消
课程须知
1、对模块化开发有一些了解 2、使用过 node 对 npm 有基本的了解 3、对打包有一个基本的概念
老师告诉你能学到什么?
1、模块化的开发 2、webpack 的 CLI (命令行) 3、webpack 如何在项目中打包 4、webpack 如何处理项目中的资源文件

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!