집 >웹 프론트엔드 >JS 튜토리얼 >webpack.config.js 매개변수 사용에 대한 튜토리얼

webpack.config.js 매개변수 사용에 대한 튜토리얼

php中世界最好的语言원래의: 2018-06-15 14:36:571806검색

이번에는 webpack.config.js 매개변수 사용법에 대한 튜토리얼을 가져왔습니다. webpack.config.js 매개변수 사용 시 주의사항은 무엇인가요? 다음은 실제 사례입니다.

webpack.config.js 파일은 일반적으로 프로젝트의 루트 디렉터리에 위치하며, 그 자체도 표준 Commonjs 사양의 모듈입니다.

var webpack = require('webpack');
module.exports = {
 entry: [
  'webpack/hot/only-dev-server',
  './js/app.js'
 ],
 output: {
  path: './build',
  filename: 'bundle.js'
 },
 module: {
  loaders: [
  { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude:  /node_modules/ },
  { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
  { test: /\.css$/, loader: "style!css" },
  {test: /\.less/,loader: 'style-loader!css-loader!less-loader'}
  ]
 },
 resolve:{
  extensions:['','.js','.json']
 },
 plugins: [
  new webpack.NoErrorsPlugin()
 ]
};

1.entry

entry는 문자열, 배열 또는 객체일 수 있습니다.

항목이 문자열인 경우 항목 파일을 정의하는 데 사용됩니다.

entry: './js/main.js'

항목이 배열인 경우 항목 js 파일도 포함됩니다. 또 다른 매개변수를 사용하여 webpack, webpack에서 제공하는 정적 리소스 서버를 구성할 수 있습니다. -개발-서버. webpack-dev-server는 프로젝트의 각 파일에 대한 변경 사항을 모니터링하고 실시간으로 빌드하며 페이지를 자동으로 새로 고칩니다.

entry: [
  'webpack/hot/only-dev-server',
  './js/app.js'

항목이 객체인 경우 서로 다른 파일을 서로 다른 파일로 빌드하고 필요에 따라 사용할 수 있습니다. 예를 들어 hello.js를 내 hello 페이지에 소개하면 됩니다.

 entry: {
  hello: './js/hello.js',
  form: './js/form.js'
 }

2.output

출력 매개변수는 빌드된 파일의 출력을 정의하는 데 사용되는 개체입니다. 경로와 파일 이름이 포함되어 있습니다:

 output: {
  path: './build',
  filename: 'bundle.js'
 }

항목에서 여러 파일을 정의하고 빌드할 때 파일 이름은 그에 따라 [이름]으로 변경될 수 있습니다. js는 빌드된 후 다양한 파일의 이름을 정의하는 데 사용됩니다.

3.module

모듈 로딩에 관해서는 module.loaders에서 정의합니다. 여기에서는 정규식을 사용하여 파일 이름을 서로 다른 접미사로 일치시킨 다음 이에 대해 서로 다른 로더를 정의합니다. 예를 들어, 더 적은 수의 파일에 대해 3개의 로더를 연속으로 정의합니다(! 계단식 관계를 정의하는 데 사용됨):

module: {
 loaders: [
  { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
  { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
  { test: /\.css$/, loader: "style!css" },
  { test: /\.less/, loader: 'style-loader!css-loader!less-loader'}
 ]
}

또한 png 및 jpg와 같은 이미지 리소스를 추가하여 10k 미만인 경우 자동으로 base64 이미지로 처리할 수도 있습니다. . 로더:

{ test: /\.(png|jpg)$/,loader: 'url-loader?limit=10000'}

css, less 및 이미지에 로더를 추가한 후 노드에서처럼 js 파일이 필요할 뿐만 아니라 CSS, less 및 이미지 파일도 필요할 수 있습니다.

 require('./bootstrap.css');
 require('./myapp.less');
 var img = document.createElement('img');
 img.src = require('./glyph.png');

하지만 알아야 할 사항은 , 필요한 파일이 js 번들에 인라인되도록 합니다. 필수 작성 방법을 유지해야 하고 CSS 파일을 별도로 꺼내고 싶다면 아래에 언급된 [extract-text-webpack-plugin] 플러그인을 사용할 수 있습니다.

위 예제 코드에서 구성된 첫 번째 로더에서는 React-hot이라는 로더를 볼 수 있습니다. 내 프로젝트는 React를 학습하고 관련 코드를 작성하는 데 사용되므로 React 구성 요소의 핫 교체를 구현할 수 있는 React-Hot Loader를 구성했습니다. Entry 매개변수에 webpack/hot/only-dev-server를 구성했기 때문에, React-hot-loader를 사용하려면 webpack 개발 서버를 시작할 때 --hot 매개변수만 활성화하면 됩니다. package.json 파일에서 다음과 같이 정의하십시오.

"scripts": {
  "start": "webpack-dev-server --hot --progress --colors",
  "build": "webpack --progress --colors"
 }

4.resolve

패키지를 빌드할 때 webpack은 디렉토리별로 파일을 검색합니다. 해결 속성의 확장 배열을 사용하여 프로그램을 구성할 수 있습니다. 모든 파일 접미사:

 resolve:{
  extensions:['','.js','.json']
 }

그런 다음 js 파일을 로드하려면 common.js 파일을 로드하는 데 require('common')만 필요합니다.

6.externals

프로젝트에 다른 클래스 라이브러리나 API가 필요하지만 이러한 클래스 라이브러리의 소스 코드를 런타임 파일에 내장하고 싶지 않은 경우 이는 매우 어렵습니다. 실제적인 개발이 필요합니다. 이 시점에서 외부 매개변수를 구성하여 이 문제를 해결할 수 있습니다.

 externals: {
  "jquery": "jQuery"
 }

그러면 프로젝트에서 이러한 API를 자신있게 사용할 수 있습니다. var jQuery = require("jquery");

7.context

모듈이 필요할 때 다음과 같이 require에 변수를 포함하면:

require("./mods/" + name + ".js");

그러면 컴파일 중에 특정 모듈을 알 수 없습니다. 하지만 이때 webpack은 다음과 같은 몇 가지 분석 작업도 수행합니다.

1. 분석 디렉터리: './mods';

2. /';

이번에는 컴파일을 위해 wenpack과 더 잘 협력하기 위해 cake-webpack-config에서 했던 것처럼 경로를 지정할 수 있습니다(여기서는 aboption의 역할을 무시합니다):

 var currentBase = process.cwd();
 var context = abcOptions.options.context ? abcOptions.options.context : 
 path.isAbsolute(entryDir) ? entryDir : path.join(currentBase, entryDir);

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

webpack.config.js 매개변수 사용에 대한 튜토리얼

관련 기사