webpackを使用してvue開発環境を構築します（2）

webpackを使用してvue開発環境を構築します（2）

前回の後、2番目の記事はさらに構成を開始しました

古いルールは、v0.0.1コードに基づいて開発を続けます。今回は、構成後のコードがv0.0.2に分割されます。

開発エクスペリエンスを向上させるために使用量を減らす

cssプリプロセッサレスをインストールして使用する

npm install --save-dev less less-loader

ので、設定を変更するtestことは、正規表現を受け取ることができ、その後のためにcssとless一致し、我々は書くことができます。test: /\.(less|css)$/,

• webpack.base.js

元のtest:/\.css$/モジュールを変更します

module.exports = {
    
    
  // ...
  module: {
    
    
    rules: [
      {
    
    
        test: /\.(less|css)$/,
        use: ['vue-style-loader', {
    
     loader: 'css-loader', options: {
    
     esModule: false } }, 'less-loader']
      }
    ]
  }
  // ...
}

構成が完了したら、に戻りApp.vueます。スタイルタグに追加しlang="less"ます。そして、より少ない文法に従ってそれを書いてください

• アプリを見る

<style lang="less">
  .text-red {
     
     
    color: #000;
  }

  .avatar {
     
     
    width: 100px;
    height: 100px;
    &.bg-avatar {
     
     
      background-image: url('./assets/image/avatar.jpg');
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
</style>

新しい/src/assets/css/common.lessファイルを作成できます@import、機能を導入してみてください

• /src/assets/css/common.less

body {
  background-color: #909090;
}

• アプリを見る

<style lang="less">
  @import './assets/css/common.less';
  .text-red {
     
     
    color: #000;
  }

  .avatar {
     
     
    width: 100px;
    height: 100px;
    &.bg-avatar {
     
     
      background-image: url('./assets/image/avatar.jpg');
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
</style>

前のもののために、それらがすべて有効であることがわかりますurl-loader。だからファイルを紹介したときはスムーズでお得でした〜

CSSプレフィックスのオートコンプリートを設定します

主要なブラウザには異なるプレフィックスがあります。1つずつ入力するのは面倒です。border-raidusにも互換性のあるプレフィックスが付いていると想像できますか（現在はすべてのブラウザでサポートされていますが）

パッケージにプレフィックスを自動的に追加する場合は、、postcss-loaderおよびを使用する必要があります。autoprefixer

npm i autoprefixer postcss-loader -D

構成する前に、いくつかの落とし穴について説明します。postcss-loaderとautoprefixerの構成が無効な場合は、次の点に注意してください。

• Autoprefixerを構成する前に、まずAutoprefixerを追加する必要がありますBrowserslist。ルートディレクトリ.browserslistrcでプラスになることがpackage.jsonできますbrowserslist。ファイルはファイルを追加することもできます：。ただし、追加する必要があります。追加しないと、自動プレフィックスが有効になりません。

• 第二に、あなたはpostcss.config.js背後にあるルートにディレクトリを作成する必要があります

• 自動プレフィックスバージョンの処理

• webpack.base.js

ローダー从右往左的执行顺序によるとpostcss-loader、最後から2番目の位置に配置します。

module.exports = {
    
    
  // ...
  module: {
    
    
    rules: [
      {
    
    
        test: /\.(less|css)$/,
        use: [
          'vue-style-loader',
          {
    
     loader: 'css-loader', options: {
    
     esModule: false } },
          'postcss-loader',
          'less-loader'
        ]
      }
    ]
  }
  // ...
}

• package.json
  これ以上ファイルを支払う必要はありません。この構成は、package.jsonで直接行われます。

{
    
    
  "browserslist": ["last 2 version", "> 1%", "iOS >= 7", "Android > 4.1", "Firefox > 20"]
}

• ファイルpostcss.config.jsをルートディレクトリに追加します

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

個別に作成する必要がありpostcss.config.js、webpack構成で書き込めないのはなぜですか？

テスト後postcss.config.js、存在する目的は、webpackがpostcss-loaderサポートされなくなったためですplugins。したがって、構成には追加のファイルが必要です。

configuration has an unknown property 'rules'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, externals?, infrastrdule?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, resolve?, resolveLoader?, serve?, stats?, target?, watch?, watchOptions? }

---

プレフィックスが必要なcssテストを追加する最も簡単な方法はdisplay:flex;です。効果を見る

なぜ、自動インストールautoprefixerバージョンが高すぎるので、"autoprefixer": "^10.0.0"
コンクリートをインストールしたので問題を見ることができます

autoprefixerダウングレードの次に

npm uninstall autoprefixer

npm install [email protected] -D

結局、プレフィックスは自動的に不完全です。

cssスタイルの分離を構成する

キーポイント：cssスタイルとJSの分離を使用する前に、publicPathの/と./の違いを明確にする必要があります。！
publicPathの役割を理解していない場合は、最初にこの部分を読むことができます：webpack / vue-cliのpublicPathの違い

長い間作業した後、cssのプレフィックスはついにOKになりましたが、
パッケージ化の効果は見つかりませんでした。元のcssがJSに混在しているため、元の大きなJSファイルがさらに悪化しています。ページスタイルは十分に複雑です、私はそれを信じることができません

次に、mini-css-extract-plugin構成cssの分離と圧縮を使用します

npm i mini-css-extract-plugin -D

• webpack.base.js

Cssまたはモジュールを変更します。今回vue-style-loaderは
、ルート以外のディレクトリを構成するための状況css出力フォルダーを削除するために、を構成する必要がありますpublicPath。前述のwebpack / vue-cliのpublicPathの違いによると、開発環境で使用しています/。実稼働環境で使用されます../。MiniCssExtractPlugin.loaderまた、publicPathを個別に構成します../。理由がわからない、前のリンクを読むことを忘れないでください〜

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
    
    
  output: {
    
    
    filename: '[name].[contenthash].js',
    publicPath: './', // base.js 中的这个配置其实会被后面覆盖掉，所以写哪个都没关系
    path: path.resolve(ROOT_PATH, 'dist')
  },
  module: {
    
    
    rules: [
      // ...
      {
    
    
        test: /\.(less|css)$/,
        use: [
          {
    
    
            loader: MiniCssExtractPlugin.loader,
            options: {
    
    
              publicPath: '../' // 注意添加了输出路径
            }
          },
          {
    
     loader: 'css-loader', options: {
    
     esModule: false } },
          'postcss-loader',
          'less-loader'
        ]
      }
    ]
  },
  plugins: [
    // ...
    new MiniCssExtractPlugin({
    
    
      // css的分离到了单独的 css 目录下，并且哈希值继续使用 contenthash
      filename: 'css/[name].[contenthash:4].css'
    })
  ]
}

• webpack.dev.js

const baseConfig = require('./webpack.base')
const {
    
     merge } = require('webpack-merge')
const path = require('path')
const ROOT_PATH = path.resolve(__dirname, '../')

module.exports = merge(baseConfig, {
    
    
  mode: 'development',
  output: {
    
    
    filename: '[name].[contenthash].js',
    publicPath: '/', // dev 环境下记得使用 / 不然会有其他问题
    path: path.resolve(ROOT_PATH, 'dist')
  }
})

• webpack.prod.js

const baseConfig = require('./webpack.base')
const {
    
     merge } = require('webpack-merge')
const {
    
     CleanWebpackPlugin } = require('clean-webpack-plugin')
const path = require('path')
const ROOT_PATH = path.resolve(__dirname, '../')

module.exports = merge(baseConfig, {
    
    
  mode: 'production',
  output: {
    
    
    filename: '[name].[contenthash].js',
    publicPath: './', // prod 的配置和dev目前是差不多的，不过 publicPath 换成了 './'
    path: path.resolve(ROOT_PATH, 'dist')
  },
  // 而且还多了一个打包清空dist的插件
  plugins: [new CleanWebpackPlugin()]
})

実行して効果を確認します。cssの画像プレフィックスが完成しました../。効果があったようです。

最後に、publicPath構成の理解を引き続き強調します。webpackを自分で作成する利点は、各作業のプロセスを知っていることです。

babelES6をES5に変換するために使用します

これで、vue環境も利用可能になり、インストール数も少なくなり（saasは同じです。時間があるときにプラグイン構成を追加できます）、CSSのオートコンプリートは問題なく、ファイル分離ピットも段階的に実行されます。オン。

しかし、最も重要な質問を見逃してください-IEブラウザを開いてみましょう：

この問題は驚くべきことではありません。JS構文は互換性が低くなければなりません。babelはこれに不思議ではありません。

インストールbabel-loaderが、それはまた、プラグイン他のプラグインに依存しています：@babel/core、@babel/plugin-transform-runtime、@babel/preset-env

npm i babel-loader @babel/core @babel/plugin-transform-runtime @babel/preset-env -D

• webpack.base.js

node_modulesパッケージを除外するための変換を追加します

module.exports = {
    
    
  module: {
    
    
    rules: [
      // ...
      {
    
    
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
    
    
          loader: 'babel-loader',
          options: {
    
    
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-transform-runtime']
          }
        }
      }
    ]
  }
  // ...
}

次に、プロジェクトを再実行し、IEに移動して状況を確認します。問題ありません

パックしてからhttp-serveで実行し（主にパッケージにバグがあるかどうかを確認したい）、http-serveを使用することを忘れないでください。そうしないと、プレビューできません

jsの文法変換もOKです。設定の書き込みはますますスムーズになっているようです！

プロジェクトリソースを整理する

エンディングv0.0.2前に、我々は再び設定を書き見えます：webpack-base.js、webpack-dev.js、webpack-prod.js。公共の場所は何ですか：

2つのパブリックディレクトリ

• ROOT_PATH
• path.resolve（ROOT_PATH、 'dist'）

この部分も最初の移行であり、パブリック構成ファイルを書き込むため、構成ファイルがどこに移動しても、基本的にディレクトリが混乱することはありません。

でbuild新しいフォルダPATH.jsストアのディレクトリのプロジェクトに使用され、我々は、使用したいです

いくつかのフォルダ、パッケージ化されたdistファイルディレクトリ、およびテンプレートファイルのindex.htmlファイル、エントリファイルなどを整理しました。この部分は、後続のマルチエントリページへの道も開いています。

• build / PATH.js

const path = require('path')
const ROOT = path.resolve(__dirname, '../')
const DIST = path.resolve(ROOT, 'dist')

const tmp_main = path.resolve(ROOT, 'src/main.js')
const TEMPLATE_HTML = path.resolve(ROOT, 'public/index.html')

module.exports = {
    
    
  ROOT,
  DIST,
  TEMPLATE_HTML,
  tmp_main
}

• webpack.base.js

// 注意2个地方被注释掉了，统一从PATH引入
// const path = require('path')
// const ROOT_PATH = path.resolve(__dirname, '../')
const {
    
     DIST, tmp_main, TEMPLATE_HTML } = require('./PATH')

module.exports = {
    
    
  output: {
    
    
    filename: '[name].[contenthash].js',
    publicPath: './',
    path: DIST // 改动了这里的PATH
  },
  // ...
  plugins: [
    // ...
    // 设置html模板生成路径
    new HtmlWebpackPlugins({
    
    
      filename: 'index.html',
      template: TEMPLATE_HTML, // 改了 template 的目录
      chunks: ['main'] // 指定在html自动引入的js打包文件
    })
  ]
}

• webpack-dev.jsとwebpack-prod.js
  の2つのファイルへの変更も同じであるため、繰り返しません。

// 注意2个地方被注释掉了，统一从PATH引入
// const path = require('path')
// const ROOT_PATH = path.resolve(__dirname, '../')
const {
    
     DIST } = require('./PATH')

// output.path 改一下为 DIST 就可以了

やっと

ピットシリーズ（2）を踏むwebpackも終わりました〜。IE Big Brotherによって行われるJS変換と互換性を持たせるために、less、cssスタイルの分離、cssプレフィックス補完の使用が導入されました

変更されたファイルは次のとおりです。

しかし、今でもプロジェクトはページをパックしているので、私の考えはページを作成すること多入口的单页面应用です。nuxtそれほど複雑ではないかもしれませんが、ある意味では、最初の画面をロードする問題を減らすことができます-

次のプレビュー：

• 現在のプロジェクトのホットアップデートとはどのようなホットアップデートですか？
• シンプルなマルチエントリーを実現
• 入り口への自動アクセスを実現（ハイライト）
• コードの実行後にURL出力を追加します

私の元のブログアドレス、クリックしてSEOの包含を改善し、ありがとうございます〜webpackを使用してvue開発環境を構築します（2）