webpack의 지정된 위치에 파일을 묶고 로드합니다(자세한 튜토리얼).

아래에서는 웹팩 패키징 및 특정 위치에 파일을 로드하는 방법을 공유하겠습니다. 참고할 만한 가치가 있어 모든 분들께 도움이 되기를 바랍니다.

패키징에 webpack을 사용할 때 가장 좋은 점은 파일을 직접 요구할 수 있다는 것입니다. 그러나 이로 인해

또한 문제가 발생합니다. 즉, 모든 파일을 함께 통합하면 패키지가 너무 커집니다.

이를 바탕으로 웹팩 패키징에 대해 알아보겠습니다(주로 필요한 콘텐츠 모듈을 별도로 패키징하는 방법,

설정한 저장 경로에 따라 저장하는 방법)

우선

webpack.config.js 파일의 항목 입력 기능은 어떤 항목을 js 패키지에 별도로 패키징해야 하는지 나타냅니다.

entry: {
  main: path.resolve(__dirname,'src/index.js'),
  jq: ['jquery'],
  react: ['react'],
  redom: ['react-dom']
},
output: {
  path: path.resolve(__dirname,'dist'),
  publishPath: 'dist/',
  filename: '[name].js'
 },
plugin: [
  new webpack.optimize.CommonsChunkPlugin('jq','jq.js'),
  new webpack.optimize.CommonsChunkPlugin('vendors','vendors.js'),
  new webpack.optimize.CommonsChunkPlugin('redom','redom.js')
]

위와 같이 구성하면 파일이 생성될 때 jq가 dist 디렉터리에 추가됩니다. 생성된 js, Vendors.js, redom.js는 세 가지 js입니다

위에서는 여러 패키지를 패키징해야 하는 문제를 해결합니다.

그럼 패키징된 js를 지정된 위치에 저장하려면 어떻게 해야 합니까? ? 걱정하지 마십시오.

의 구체적인 구현은 다음과 같습니다(실제로 차이점은 주로 입력 기능에 있습니다):

entry: {
  './common/main': path.resolve(__dirname,'src/index.js'),
  './jquery/jq': ['jquery'],
  './react/react': ['react'],
  './reactdom/redom': ['react-dom']
 },

위에 표시된 것처럼 4개의 js는 우리가 공식화한 dist 아래의 4개 파일에 저장됩니다. 잡았다. (참고: 이 시점에서는 더 이상 webpack.optimize.CommonsChunkPlugin 플러그인을 사용할 필요가 없습니다.)

마지막으로 왼쪽 및 오른쪽 webpack.config.js 코드를 붙여넣습니다.

var webpack = require('webpack');
var path = require('path');
module.exports = {
 entry: {
  './common/main': path.resolve(__dirname,'src/index.js'),
  './jquery/jq': ['jquery'],
  './react/react': ['react'],
  './reactdom/redom': ['react-dom']
 },
 output: {
  path: path.resolve(__dirname,'dist'),
  publishPath: 'dist/',
  filename: '[name].js'
 },
 module: {
  loaders: [
   {
    test: /\.scss$/,
    loader: 'style!css!sass'
   },
   {
    test: /\.js$/,
    exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\/|presets\//,
    loader: 'babel'
   },
   {
    test: /\.(png|jpg|gif)$/,
    loader: 'url?limit=40000'
   }
  ]
 },
 babel: {
  presets: ['es2015','stage-0','react'],
  plugins: ['transform-runtime',["antd",{"style": "css"}]]
 },
 resolve: ['js','jsx','css'],
 plugins:[
  new webpack.ProvidePlugin({
   $:"jquery",
   jQuery:"jquery",
   "window.jQuery":"jquery"
  })
 // new webpack.optimize.CommonsChunkPlugin('jq','jq.js'),
 // new webpack.optimize.CommonsChunkPlugin('vendors','vendors.js'),
 // new webpack.optimize.CommonsChunkPlugin('redom','redom.js')
 ]
};

위는 제가 모두를 위해 컴파일한 것입니다. . 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

피어 구성 요소 간 통신을 위해 vue에서 eventBus를 사용하는 방법

vue2.0에서 사용자 정의 원형 차트(Echarts) 구성 요소를 구현하는 방법

Vue 디스플레이에서 슬롯을 구현하는 방법 하위 구성 요소의 상위 구성 요소가 전달한 템플릿(자세한 튜토리얼)

위 내용은 webpack의 지정된 위치에 파일을 묶고 로드합니다(자세한 튜토리얼).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!