웹팩을 작동하여 파일을 처리하는 방법

이번에는 webpack프로세스 파일을 조작하는 방법과, 파일을 처리하기 위해 webpack을 조작할 때의 주의사항에 대해 알려드리겠습니다.

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

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

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

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

우선

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')
 ]
};

다음 방법을 마스터하신 것 같습니다. 이 글의 사례를 읽고, 더 많은 PHP 중국어 사이트의 다른 관련 글도 주목해주세요!

추천 자료:

웹팩이 동적으로 파일을 가져오는 방법

CDN의 반응 웹팩을 사용하여 파일을 패키징

WeChat 애플릿의 순환 진행률 표시줄을 만드는 방법

위 내용은 웹팩을 작동하여 파일을 처리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!