Webpack使用

18761 ワード

Vue Webpack

概要
Webpakcの位置づけは実際にはタスク実行器ではなくパッケージング器である.もちろんgruntと協力して使用することもできる.webpackは便利なパッケージングプロセス、プロジェクト構築を提供している.プラグイン管理など.より良い构筑プロジェクトのために开発から生产まで一つひとつのソリューションを提供している.Vue公式でも推奨されているvue-loaderもwebpackベースである.そこでここでは简単にwebpackの使用についてまとめて绍介する.より详しい内容は公式サイトに広げることができる.
インストール
ローカルインストール
コマンドラインのインストール方法を使用します.

npm install --save-dev webpack

プロファイルのpackage.jsonに書き込んで、対応するディレクトリでnpm installを実行できます.

{
  "name": "XXXX",
  "version": "1.0.0",
  "description": "XXX",
  "author": "XXX",
  "private": true,
  "scripts": {//      
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "watch":"webpack --watch",
    "build": "webpack --config webpack.prod.js",//        
    "debug": "nodemon build/build.js"
  },
  "dependencies": {
    "swiper": "^4.0.7",
    "vue": "^2.5.2",
    "vue-router": "^2.8.1",
    "element-ui": "2.2.1"
  },
  "devDependencies": {
  }
}

グローバルインストール

npm install --global webpack

エンジニアリング構造
プロジェクトの実際の状況に基づいてディレクトリを設定することができます.一般的にはソースディレクトリ、生産ディレクトリに設定することができます.
Webpackプロファイルとpackage.jsonをプロジェクトのルートディレクトリに入れることができます.
Webpackプロファイル

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

ディレクトリ構造は次のとおりです.

webpack-demo
|- package.json
|- webpack.config.js
|- /dist
  |- bundle.js
  |- index.html
|- /src
  |- index.js
|- /node_modules

リソース管理
ここではまずCSSリソースの管理構成を簡単に紹介する.
loaderをインストール、loaderの役割はファイルを処理(コンパイル、圧縮)することである.

npm install --save-dev style-loader css-loader

module.exports =     
{
    module: {
      rules: [
        {
          test: /\.css$/, //      ,  style-loader,css-loader
          use: [
            'style-loader',
            'css-loader'
          ]
      }]
     }
}

しゅつりょくかんり
出力管理の目的は、作業をより簡素化することです.プラグインを使用したり、jsの名前を変更したりすることができます.
Webpackには多くのプラグインがありますが、私はそれを変更することができますか?
ここではまず、2つのプラグインがhtmlを生成するプラグインを簡単に紹介し、ディレクトリのプラグインをクリアします.

npm install clean-webpack-plugin --save-dev 
npm install --save-dev html-webpack-plugin

プロファイル全体にわたって、プラグインの構成順序に注意する.

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

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
    plugins: [
      new CleanWebpackPlugin(['dist']),//  dist  
      new HtmlWebpackPlugin({ //    html     title,      js      js  
        title: 'Output Management'
      })
    ],
    output: {
      //publicPath:XXX         ,build                 
      filename: '[name].bundle.js', //  name       ,name      entry key ,           
      path: path.resolve(__dirname, 'dist')
    }
  };

開発ツール
Webpackが最も強力なのは、開発が提供する開発ツールであるwebpack-serverがページにアクセスするサービスを提供するwebpack-watchがファイルの変化を観察するwebpack-dev-middleware webpack-server内部もこの方法を採用しているだけでなく、他のカスタム機能も強力である.
プロファイル

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

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
    devtool: 'inline-source-map',
   //devServer: {
     
   //  contentBase: './dist'
   //},
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Output Management'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
     publicPath: '/'//middleware      ,url     
    }
  };

dist兄弟ディレクトリにserver.jsを追加する

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');

const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);

app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath
}));

// Serve the files on port 3000.
app.listen(3000, function () {
     
  console.log('Example app listening on port 3000!
');
});

HRM
HRMはhot replacement moduleである、主にサービス開始後のファイルをホットに更新することができる、例えばcssスタイルやjsなどのファイル変更は、自動的にページに更新される.開発環境にのみ使用でき、生産環境には使用できない.

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');
+ const webpack = require('webpack');

  module.exports = {
    entry: {
        app: './src/index.js'
    },
    devtool: 'inline-source-map',
    devServer: {
      contentBase: './dist',
     hot: true
    },
       module: {
     rules: [
       {
         test: /\.css$/,
         use: ['style-loader', 'css-loader']//style-loader     CSS        
       }
     ]
   },
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Hot Module Replacement'
      }),
     new webpack.NamedModulesPlugin(),//                 
     new webpack.HotModuleReplacementPlugin()//      
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

Vue-Loader
Vue-loader
.vueファイルは、VueコンポーネントをクラスHTML構文で記述するカスタムファイルタイプです.各.vueファイルには、3つのタイプの最上位言語ブロック