Webpack設定

16678 ワード
テキストリンク

Webpack


  • npm init-yでコンポーネントをインストール

  • npm i -D webpack webpack-cli webpack-dev-server@next
    • webpack-cli: commend line interface. Webpackコマンドを使用できます.
    Webpack-dev-server:開発サーバを開くと、開発の専門ページになります.
  • package.jsonのscriptに開発モードdev、製品モードbuild設定
    • を設定する
     "scripts": {
    "dev": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  },

  • 新しいhtml、jsファイルを作成する

  • webpack.config.jsの作成
    • // 전역 모듈 호출
const path = require('path')

module.exports = {
  //파일을 읽어들이기 시작하는 진입점을 설정한다.
  entry: './js/main.js',

  //결과물(번들)을 반환하는 설정
  //output은 node.js에서 필요로하는 절대 경로를 설정해주어야 한다.
  output: {
    
    //resolve 메서드는 인수들의 경로를 합쳐준다.
    //dirname 또한 전역변수이며 현재 파일이 있는 그 경로를 지칭한다.
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  }
}
    ポイントに入るにはいろいろな種類があります.
    entry: {
 home: 'home.js',
 about: 'about.js',
 contact: 'contact.js'
}

  • terminal-npm run build時にdistフォルダを作成するかどうか.

  • 既存のファイルを削除する場合は、clean propertyを出力に追加します.
    • output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'main.js',
    clean: true
  }
  • npm i-D html-webpack-plugin後webpack.config.呼び出しjs 
    • const HtmlPlugin = require('html-webpack-plugin')
  • module.エクスポートでプラグインとdevServerを作成する
    結果を生成する過程でpluginsを使用します.
    • //번들링 후 결과물의 처리 방식 등 다양한 플러그인들을 설정
  plugins: [
    new HtmlPlugin({
      template: './index.html'
    })
  ],

  devServer: {
    host: 'localhost'
  }

  • 静的フォルダを作成したらfaviconを挿入して画像フォルダを作成し、logoを挿入します.

  • index.htmlにimg要素を挿入して画像ファイルパスを設定する

  • npm i-D copy-webpack-plugin後webpack.config.jsで呼び出した後にプラグイン配列を挿入する
    • 
const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
module.exports = {
 
  entry: './js/main.js',
  
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
    clean: true
  },
 
  plugins: [
    new HtmlPlugin({
      template: './index.html'
    }),
    new CopyPlugin({
      patterns: [
        { from: 'static' }
      ]
    })
  ],

  devServer: {
    host: 'localhost'
  }
}
    CopyPluginでは、from内のフォルダのサブフォルダをdistフォルダにコピーできます.
  • npm i -D css-loader, npm i -D scss-loader, style-loader
    scssで、cssファイルをインポートできます.
    • 
const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
module.exports = {
  
  entry: './js/main.js',

  
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
    clean: true
  },
  module: {
    rules: [
      {
        // .scss .css로 확장자를 찾게 해준다.
        test:/\.s?css$/,
        // js에서 css를 해석할 수 있게 해주는 css-loader
        // 해석된 내용을 삽입해주는 style-loader
        use:[
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },

  plugins: [
    new HtmlPlugin({
      template: './index.html'
    }),
    new CopyPlugin({
      patterns: [
        { from: 'static' }
      ]
    })
  ],

  devServer: {
    host: 'localhost'
  }
  • npm i-D Postcss autofrefixer postcs-loaderインストール
    • postcss:ポストプロセッサ、サプライヤーシステム孔子設定に必要
    「sass-loader」に「postcs-loader」を作成する
  • pakage.jsonでbrowserlist
    • を作成する
    
  "browserslist": [
    // 전세계 1% 이상의 브라우저 이상에서 
    "> 1%",
    // 2개 버전을 모두 지원하겠다는 뜻
    "last 2 versions"    
  ]
  • postcssrc.jsファイル作成後の接続
    • module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}
  • npm i-D@babel/core@babelプリセット-env@babel/plugin-transform-runtimebabel-loaderパッケージインストール後babelrc.js
    • の作成
    module.exports = {
  presets: ['@babel/preset-env'],
  plugins: [
    ['@babel/plugin-transform-runtime']
  ]
}
  • webpack.config.jsのmodule-rulesにbable-loader
    • を作成する
     {
        test: /\.js$/,
        use: [
          'babel-loader'
        ]
 }
  • .gitignore
    • の作成
    .cache
node_modules
dist
    npx degitによってコピーされ、
  • を使用して作成されたwebpack-templatenpx degit Tchaikovsky1114/webpack-template-basic webpack-template-testnpx degitにコピーすると、gitクローンとは異なるバージョン管理されていないフォルダにコピーできます.
    • HashMapのいくつかの遍歴の時間をテストします
    Springmvc注記@PathVariable@RequestHeader@CookieValue簡易テスト