webpack4 的开辟环境设置申明

2023年5月22日 160次阅读 来源: Ziwei

webpack4 的开辟环境设置申明

完全的webpack4的设置clone地点： https://github.com/ziwei3749/…

开辟环境的搭建，整体而言就比较轻松，由于用户就是开辟者们。

你不须要斟酌 hash 是不是稳固、代码提取是不是平常。

只需你自身能够开辟、而且以为开辟体验 ok，那末你这个设置就是靠谱的。

这篇文章重要是以我自身搭建 vue + webpack 的开辟为例子，纪录自身从 0 搭建时的思绪和碰到的坑。

所以能够不会关于设置的细节，做太细致的申明

那末，重点申明的是思绪和一些注重点

  • 1.从 0 搭建一个项目标思绪
  • 2.搭建过程当中我碰到的坑，给人人分享一下。

下面是我们要设置的功用，也会体现从 0 搭建项目标思绪和注重点。

  • 1.处置惩罚 vue 文件
  • 2.运用 devServer

  • 3.处置惩罚静态资本的插件和 loader

    • 3.1 处置惩罚 css/css 预处置惩罚器
    • 3.2 处置惩罚图片途径
    • 3.3 处置惩罚 ES6 语法
    • 3.4 postcss 自动增添 css 前缀
    • 3.5 在 vue 里开启 css module
  • 4.指定 devtool

  • 5.代码范例束缚设置

    • .eslint
    • .editorconfig
    • pre-commit
  • 6.resolve 别号设置
  • 7.webpack 日记仪表盘 webpack-dashboard

一.处置惩罚 vue 文件

从零搭建，就是从空文件夹最先嘛。那末起首

mkdir webpack4-project

cd webpack4-project

npm init

初始化项目后，下一步做什么呢？

想一想，我们既然要设置 vue webpack 的前端开辟环境

那一定要下载 webpack 、vue 吧，浏览器没法处置惩罚 vue 文件，那一定须要 vue-loader 吧

不必忧郁自身做的对不对，横竖做错了，终端一定会通知你了，所以一定要自身着手

npm i webpack vue vue-loader --save-dev
  • 1.注重：装置 vue-loader 后，会提醒你 vue-loader 依托 css-loader 和 vue-template-compiler
npm i css-loader vue-template-compiler --save-dev

下载以后，就能够去写 webpack 设置了。

  • 2.注重：假如你直接在终端输入 webpack，会提醒你装置 webpack-cli。
  • 3.注重：装置后尝试直接在项目里写 vue 文件，会提醒你须要 loader 来处置惩罚。因而去设置 vue-loader
  • 4.注重： 所以我们在 webpack.config.js 里 module 里设置，然后提醒你须要 css-loader 和 VueLoaderPlugin
            {
                test: /\.vue$/,
                use: 'vue-loader'
            }

根据请求设置 css-loader ；
VueLoaderPlugin 是 vue-loader 内置的插件，直接在 plugins 设置就好 (这个是 vue-loader@15 的变化)

然则没有 devServer，如今我们还看不到结果，接下来是开辟效劳器设置

二.运用 devServer

运用 devServer 须要装置 webpack-dev-server

装置后，就能够去设置 devServer，devServer 能够有许多参数，

然则如今能够不必关注。由于 webpack4 是有默许设置的。

  • 1.注重： 这里涉及到环境变量的辨别。

由于一个项目在开辟和临盆环境下，有差别的需求。所以天然要有一个变量用来辨别环境。

webpack3 的做法是在 package.json 的 script 字段设置 NODE_ENV

相似如许

  "scripts": {
    "build": "NODE_ENV=production webpack --config webpack.config.js",
    "dev": "NODE_ENV=development webpack-dev-server --config webpack.config.js"
  },

如许设置后，

当运转 npm run dev 时，在 webpack.config.js 里经由过程 process.env.NODE_ENV 能够取到值 development

以 process.env.NODE_ENV 来做 if 推断就能够啦。

那末 webpack4 中，照旧能够如许做。也能够经由过程 mode 来指定环境。也是设置 process.env.NODE_ENV 的值

webpack3 中平常会设置 DefinePlugin，然则 webpack4 自动帮你设置该插件

它能够让其他第三方类库或许你自身的 vue 代码中取到 process.env.NODE_ENV,在营业中推断环境。

    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: isDev ? '"development"' : '"production"' // 由于这个插件直接实行文本替代，给定的值必需包括字符串自身内的现实引号
      }
    }),
  • 2.注重: devServer 经常使用设置项
  devServer: {
    host: '0.0.0.0',   // IP地点
    port: 8888,        // 端口号
    hot: true,          // 开启热更新
    overlay: true,      // 开启报错提醒显如今浏览器遮罩层
    historyApiFallback: true   // 设置vue-router的情势是histroy
  },

个中热更新在 webpack3 中须要设置插件，webpack4 照旧能够如许写。然则已是默许设置了。

plugins: [new webpack.HotModuleReplacementPlugin()];

如今运转 npm run dev 已能够跑起来效劳，然则没有 index.html

  • 3.注重: 装置 html-webpack-plugin,指定 template 后，才能在开辟效劳器上能够看到自身的代码结果了
  • 4.注重：辨别 npm run dev 运转时的 webpack 和终端里直接输出 webpack 的区分

前者是项目当地的 webpack,后者是全局的 webpack

三、处置惩罚静态资本的插件和 loader

3.1 处置惩罚 css/css 预处置惩罚器

  • 1.注重：处置惩罚 css，须要 style-loader 和 css-loader
style-loader:将css以style标签的情势插进去到html中
css-loader: 能在js引入css依托的就是css-loader剖析
  • 2.注重：css 预处置惩罚器，以 stylus 为例子，须要装置 stylus 和 stylus-loader

设置时，注重 style-loader css-loader stylus-loader 的递次

webpack 的剖析递次是从右向左的。

3.2 处置惩罚图片途径

处置惩罚图片须要 url-loader，而 url-loader 依托 file-loader，所以都须要下载

别的 url-loader 还能够处置惩罚字体、视频文件

    {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000,    // 小于10000kb自动转base64
              name: 'static/images/[name].[hash:7].[ext]'
            }
          }
        ]
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'static/images/[name].[hash:7].[ext]'
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'static/images/[name].[hash:7].[ext]'
        }
      },

3.3 处置惩罚 ES6 语法

处置惩罚es6的语法，须要babel

  • 1.注重 npm 晋级后，许多包的定名体式格局已变动。相似于@babel/core，@babel/preset-env 这类
  • 2.注重：能够经由过程 exclude 来设置不必编译 ES6 的文件。一般 node_modules 的依托包都不须要编译处置惩罚。
  • 3.注重：babel-preset-env 、 babel-polyfill、babel-transform-runtime-plugin的区分

babel-preset-env

babel-preset-env: 能够babel须要兼容哪些浏览器。比方一切浏览器的末了2个版本。
babel-preset-env 是根据 Can i use 和 browserslist 来推断某一个 JS 语法是不是须要用 babel 编译


然则babel-preset-env只能编译ES6中JS的语法，没法编译ES6中的api

比方let / const 会被编译 为var 

然则Array.include() Array.from() new Set()没法被编译

babel-polyfill和babel-transform-runtime-plugin

babel-polyfill是全局垫片，目标是供应一个完全的ES6环境，用于app，会污染全局变量，体积更大

babel-transform-runtime-plugin是部分垫片，重要用于开辟库，不会污染全局变量，体积更小。

结论就是平常做营业开辟就 babel-preset-env + babel-polyfill 就能够。

文档资料

实践过程当中，查阅过的文档留在这里。假如 API 遗忘或许变化了，轻易查阅。
https://babeljs.io/

关于@babel/preset-env的一篇文章，诠释useBuiltIns的三个选项
https://www.jianshu.com/p/0dc…

3.4 postcss 自动增添 css 前缀

装置postcss-loader / autoprefixer

设置loader后，还须要建立postcss.config.js作为设置文件

  module: {
    rules: [
      {
        test: /\.styl(us)?$/,
        loader: [
          'vue-style-loader',
          'css-loader',
          'postcss-loader',
          'stylus-loader'
        ]
      }
    ]
  },

postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

3.5 在 vue 里开启 css module

参考vue-loader@15就能够
https://vue-loader.vuejs.org/…

简单说就是在css-loader里增添一个设置项 module:true

这里要注重，假如你是有的vue文件用css module，有的不必的话。

须要参考文档中的【可选用法】，用oneOf来设置

四、指定 devtool

假如不指定devtool，你会发现代码调试起来非常不方便，失足的行数也看不出来。

  devtool: 'cheap-module-eval-source-map', // webpack4在开辟阶段能够不写devtool

devtool的设置我没细致研讨，我是开辟阶段用cheap-module-eval-source-map，临盆阶段去掉devtool

五、代码范例束缚设置

slint的设置,我用的stardard作风的，

官方文档地点 ： https://github.com/standard/e…

须要依托比较多的插件

npm i --save-dev eslint
npm install --save-dev eslint-config-standard eslint-plugin-standard 
eslint-plugin-promise eslint-plugin-import eslint-plugin-node

设置eslint能够碰到的题目：

  • vue没法被eslint辨认，设置plugin:[‘html’]
  • 愿望用eslint-loader搜检vue文件，然则又不能只用eslint-loader剖析vue，能够设置enforce:’pre’。如许在处置惩罚.vue之前，先用eslint-loader预处置惩罚
  • 记得用exclude: /node_modules/.封闭对第三方库代码作风的搜检
  • eslint许多报错的话，能够设置敕令一次性修改
  • 还能够经由过程一个包husky保证在git commit时，eslint报错的情况下没法提交，从而保证提交到git堆栈上代码的范例性。
  "scripts": {
    "lint": "eslint --ext .js --ext .vue src/ build",
    "lint-fix": "eslint --fix --ext .js --ext .vue src/ build",
    "precommit": "npm run lint"
  },

分享一下.editorconfi的设置,用来一致编辑器作风的

root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

六.resolve 别号设置

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      vue$: 'vue/dist/vue.esm.js',
      '@src': path.resolve(__dirname, '../src')
    }
  },

别号的设置能够碰到的坑是，在html里能够运用别号@src

然则在css是没法辨认别号。解决方案是运用 ~@src,或许在css-loader的设置项里再次设置别号

七.webpack 日记仪表盘 webpack-dashboard

这个是优打包出来的终端界面的一个插件

https://www.jianshu.com/p/46b…
https://github.com/Formidable…

运用时，须要注重的的坑是，须要设置script剧本敕令

package.json设置要领像如许，其他的参考文档就能够了，像一般插件一样运用就好

  "scripts": {
    "build": "NODE_ENV=production webpack-dashboard -- webpack --config build/webpack.prod.conf.js",
    "dev": "NODE_ENV=development webpack-dashboard -- webpack-dev-server --config build/webpack.dev.conf.js",
    
  },
    原文作者：Ziwei
    原文地址: https://segmentfault.com/a/1190000015835755
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞