菜单

js_脚本之家【澳门太阳集团】,配置多页应用

2020年4月9日 - 首页

澳门太阳集团,初学vue自个儿新建一个vue项目来做读书demo。但是在编排代码时直接现身空格不正规的警示。严重影响初读书人的热心。错误如下图所示。(那样的谬误比超多,但大要翻译成中文的情趣都是说空格使用不专门的工作。)

上文首要共享了 webpack.config.base.js
那些构造文件,本文将介绍其余八个结构文件
webpack.config.dev.js、webpack.config.prod.js 和
webpack.config.lint.js。

那是因为你使用 ESLint,用来标准代码风格的。你的 Webpack
配置中差不离是接纳了
eslint-loader。在多人同盟或大门类中推荐介绍应用,不想要就在
webpack.config.js
中去掉。eslint是语法检查工具,但约束太过分严峻,超过75%开垦职员不能适应,所以发生那一个必要。

webpack.config.dev.js

本条结构文件重大用于在支付景况使用,须要 webpack-dev-server
这几个插件提供支撑。该公文的安插如下:

// 引入基础配置文件
const webpackBase = require("./webpack.config.base");
// 引入 webpack-merge 插件
const webpackMerge = require("webpack-merge");
// 引入配置文件
const config = require("./config");
// 合并配置文件
module.exports = webpackMerge(webpackBase,{
    // 配置 webpack-dev-server
    devServer:{
        // 项目根目录
        contentBase:config.devServerOutputPath,
        // 错误、警告展示设置
        overlay:{
            errors:true,
            warnings:true
        }
    }
});

内部,webpack-merge 这几个插件用来对安插文件实行统一,在
webpack.config.base.js 的幼功上统一新的陈设。
devServer 配置项的 contentBase 项是体系的根目录,也正是我们的 dist
目录,差距在于那几个 dist 目录不是硬盘上的 dist 目录,而是存在于内部存款和储蓄器中的
dist 目录。在应用 webpack-dev-server 时,将会以那一个内部存款和储蓄器中的 dist
目录作为根目录。
devServer 的 overlay
选项中设置了显示错误和警报,这样现代码爆发错误时,会将错误消息投射到浏览器上,方便咱们开拓。
这里将 contentBase 指向了 config 中的一个安顿:

devServerOutputPath:"../dist",

清除办法:

webpack.config.prod.js

该配置文件用来在分娩情状启用,首要用来压缩、合并和收取 JavaScript
代码,并将项目文件打包至硬盘上的 dist 文件夹中。

// 引入基础配置
const webpackBase = require("./webpack.config.base");
// 引入 webpack-merge 插件
const webpackMerge = require("webpack-merge");
// 引入 webpack
const webpack = require("webpack");
// 合并配置文件
module.exports = webpackMerge(webpackBase,{
    plugins:[
        // 代码压缩
        new webpack.optimize.UglifyJsPlugin({
            // 开启 sourceMap
            sourceMap: true
        }),
        // 提取公共 JavaScript 代码
        new webpack.optimize.CommonsChunkPlugin({
            // chunk 名为 commons
            name: "commons",
            filename: "[name].bundle.js",
        }),
    ]
});

在收取公共的 JavaScript 代码时,大家将公共代码收取为
commons.bundle.js,那么些集体代码的 chunk(name)名正是 commons,在采用html-webpack-plugin 自动生成 HTML 文件时会援用这么些 chunk。

找到build->webpack.base.config.js。注释只怕去掉下图代码。

webpack.config.lint.js

那项布署用来展开代码检查,配置如下:

const webpackBase = require("./webpack.config.base");
const webpackMerge = require("webpack-merge");
const config = require("./config");
module.exports = webpackMerge(webpackBase,{
    module:{
        rules:[
            {
                test: /.js$/,
                // 强制先进行 ESLint 检查
                enforce: "pre",
                // 不对 node_modules 和 lib 文件夹中的代码进行检查
                exclude: /node_modules|lib/,
                loader: "eslint-loader",
                options: {
                    // 启用自动修复
                    fix:true,
                    // 启用警告信息
                    emitWarning:true,
                }
            },
        ]
    },
    devServer:{
        contentBase:config.devServerOutputPath,
        overlay:{
            errors:true,
            warnings:true
        }
    }
});

在行使 eslint-loader 时,大家设置了 enforce:"pre"
选项,那些选项表示在拍卖 JavaScript 以前先启用 ESLint
代码检查,然后再采纳 babel 等 loader 对 JavaScript 实行编写翻译。
在 eslint-loader 的 options
选项中,设置了自动修复和启用警示音讯,那样当咱们的代码现身难题时,ESLint
会首先尝试自动修复(如将双引号改为单引号),对于不能够自行修复的难点,将以警报或不当的新闻举行浮现。

在意只删除和注释铁锈棕圈住的代码。此外这段也大概在不在createLintingRule中,也可能在module.export中。所以提出直接在webpack.base.config.js寻觅eslint-loader。最终记得重跑项目。

配置 .eslintrc.js

要想利用 ESLint 进行代码检查,除了行使 eslint-loader 之外,还需针对
ESLint 本身进行安顿,那就要求贰个 .eslintrc.js 文件。该文件的布署如下:

module.exports = {
  env: {
    browser: true,
    commonjs: true,
    es6: true,
    node: true,
  },
  extends: 'eslint:recommended',
  parserOptions: {
    sourceType: 'module',
  },
  rules: {
    'comma-dangle': ['error', 'always-multiline'],
    indent: ['error', 2],
    'linebreak-style': ['error', 'unix'],
    quotes: ['error', 'single'],
    semi: ['error', 'always'],
    'no-unused-vars': ['warn'],
    'no-console': 0,
  },
};

对于 ESLint 还能有越来越多的配备,大家可以自行参谋一下。

以上那篇初学vue现身空格警报的原因及其应用方案就是笔者分享给我们的全体内容了,希望能给大家贰个参阅,也冀望我们多多点拨脚本之家。

总结

透过三篇小说,大约将 webpack
多页面脚手架的陈设文件都介绍了。小说写得大概有不连贯的地点,作者会在下篇著作中提供拥有的配备文件。

完。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图