学习webpack的第三天

1,454 阅读4分钟

遇到问题1:Error: Cannot find module 'webpack'

使用npm run dev时,已经安装了webpack为何还有报错信息? 我们发现又一些dev是用webpack启动的,又一些webpack-dev-server启动的原因是?

 "dev": "webpack --config webpack.config.js"
 "dev": "webpack-dev-server --open --config build/webpack.dev.js",
 "dev": "webpack-dev-server --inline"
 ...
 ./node_modules/.bin/webpack

还有许多配置组合,可以详细看开发中 server(devServer)

webpack 和webpack-dev-server答案:

  1. 区分webpack启动和webpack-dev-server启动的区别,webpack我们可以称它为打包工具,每次运行之后会生成一个打包好的文件夹,里面就是output出来的内容。webpack可以真正的打包出来一个内容,所以这里如果修改了文件内容,那需要手动执行webpack再进行打包,webpack打包不会实时更新修改。并且它和devServer中的配置项没有什么关联,再开发的时候就会降低开发效率。
  2. 这个时候就应该使用webpack-dev-server,一个服务器插件,相当于webpack+apache。启动一个web服务并实时更新修改,启动webpack-dev-server后,在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中,当修改文件后,会实时更新,不需要再次执行命令。
  3. 扩充补充对于webpack --watch 和 webpack-dev-server比较(为何大部分使用webpack-dev-server)

那么我们就再次安装npm install webpack-dev-server

报错原因: 当我们安装完webpack-dev-server之后,运行npm run dev还是报同样的错误,但是发现如果我们直接使用./node_modules/.bin/webpack,本地webpack文件的时候,是可以运行起来的,那么其中的差别是什么呢?是因为webpack 3中webpack包本身是包含webpack-cli,但是webpack4 中将webpack-cli中从webpack包中分离出来了~

webpack和webpack-dev-server详细信息比较

webpack-cli变更


遇到问题2: Error: Cannot find module 'less'

为什么明明配置了less-loader,项目还一直在报错cannot find module 'less'

原因:vue本身不支持less的,只支持css,所以其实当vue需要支持less的时候,需要安装less和less-loader的


遇到问题3: html-webpack-plugin 和 ejs-html-loader不能解决html页面的

ERROR in Error: Child compilation failed: Module parse failed: Unexpected token (1:0) File was processed with these loaders:

  • ./node_modules/html-webpack-plugin/lib/loader.js
  • ./node_modules/ejs-html-loader/lib/index.js

比较下面有关html的loader:

  1. html-loader(file-loader):html-loader 将解析 URL,并请求图片和你所期望的一切资源,最后输出js文件,带有require。extract-loader 会将 javascript 解析为合适的 html 文件,并且file-loader期望得到HTML纯文件,file-loader 将结果写入 .html 文件 (但是这边我自己的配置文件里面没有使用extract-loader,html文件也正确解析了,这是为什么?)

  2. ejs-html-loader:处理.html结尾文件,用于从EJS模板文件呈现纯HTML。

  3. ejs-loader: 处理文件已.ejs的文件,不是处理.html文件的。ejs-loader单纯处理.ejs文件里面的ejs的语法的,类似less-loader。

  4. html-webpack-plugin:详情看引用链接

    详细信息

    minifier配置项

  5. ejs-html-loader存在原因

    一般来说,我们使用html-loader来处理.html中的最终视图文件,然后将其抛出到html-webpack-plugin生成相应的文件,但是html-loader无法处理EJS模板语法<%include ...%>语法,将报告错误。但是,在多页面应用程序中,此包含功能是必需的,否则每个视图文件都必须手动编写。页眉/页脚是什么感觉?因此,我们需要配置其他ejs-html-loader。 <%- include('../../components/layout/landpage-head.html') %>

  6. ejs-loader存在原因

    ejs-loader + html-webpack-plugin 解决.ejs文件的内容 <%= require('./components/footer.ejs')() %>


扩展内容:

  1. webpack之loader篇

  2. 下面这段内容是控制build过程中输出的文件信息详细程度 Stats

    process.stdout.write(stats.toString({
        colors: true,
        modules: false,
        children: false,
        chunks: true, // false的时候下面这图中chunks这一栏信息就不在了
        chunkModules: false
        }) + '\n\n');
    

  3. eslint && .eslintrc.js

    <!--环境-->
    env: {
    node: true
    },
    <!--扩展(.vue文件)-->
    "extends": [
        "plugin:vue/essential",
        '@vue/standard'
    ],
    <!--规则-->
    rules: {
        <!--变量声明后没有使用-->
        "prefer-const": [ 
            "error",
            { 
                "destructuring": "any",
                "ignoreReadBeforeAssign": false
            }
        ],
        'no-console': 'error',  
        'no-debugger': 'error'
    },
    <!--支持的版本-->
    parserOptions: {
        parser: 'babel-eslint'
    },
    <!--全局可以使用对象-->
    globals: {
        '$': true
    }
    

    Environments - 指定脚本的运行环境。每种环境都有一组特定的预定义全局变量。
    Globals - 脚本在执行期间访问的额外的全局变量。
    Rules - 启用的规则及其各自的错误级别。

    ESLint 的使用和.eslintrc.js配置~ecmaFeatures部分

    es 中文

  4. babel

    return {
        presets, // 预设
        plugins, // 插件
        sourceType: 'unambiguous', // 'script','module','unambiguous'
        comments: false, // 注释
        compact: false // 紧凑
    }