웹 팩 4. x 학습 사용 총화
상규
1. 입구
웹 팩 이 내부 의존 도 를 구축 하 는 시작 으로 어떤 모듈 을 사용 해 야 하 는 지 알려 줍 니 다.세 가지 표기 법:
entry: "./app/entry", // string | object | array
entry: ["./app/entry1", "./app/entry2"],
entry: {
a: "./app/entry-a",
b: ["./app/entry-b1", "./app/entry-b2"]
},2. 출구
output 속성 은 웹 팩 이 만 든 bundles 를 어디서 출력 하 는 지 알려 줍 니 다.
output:{
path: path.resolve(__dirname, "dist"), // string,
filename: "bundle.js", // string
filename: "[name].js", // (entry point)（ ？）
filename: "[chunkhash].js", //
publicPath: "",
publicPath: "https://cdn.example.com/",
}3. 모듈
개발 자 는 프로그램 을 분 산 된 기능 블록 (discrete chunks of function) 으로 분해 하여 라 고 부 릅 니 다.모듈.
module:{
rules:[{
test: /\.jsx?$/,
include: [
path.resolve(__dirname, "app")
],
exclude: [
path.resolve(__dirname, "app/demo-files")
],
// ，
// test include ，
// exclude （ test include）
// ：
// - test
// - include exclude
// - exclude， include
issuer: { test, include, exclude },
// issuer （ ）
enforce: "pre",
enforce: "post",
// ， （ ）
loader: "babel-loader",
// loader，
// ，`-loader` webpack 2
// webpack 1 。
options: {
presets: ["es2015"]
},
// loader
}]
}## 4. 플러그 인 (plugins)
플러그 인 은 웹 팩 의 지주 기능 입 니 다.웹 팩 자체 도 웹 팩 설정 에 사용 되 는 같은 플러그 인 시스템 위 에 구축 되 어 있 습 니 다.
var webpack = require('webpack');
// webpack
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var DashboardPlugin = require('webpack-dashboard/plugin');
//
plugins: [
//
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor-[hash].min.js',
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: false,
}
}),
new ExtractTextPlugin({
filename: 'build.min.css',
allChunks: true,
}),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// (compile time)
//html
new HtmlWebpackPlugin({
template: 'index.html'
title: 'My App',
filename: 'assets/admin.html',
chunks: ['app'],
excludeChunks: [ 'dev-helper' ]
})
]5. 개발 중인 서버 (devserver)
devServer: {
//proxy: { // proxy URLs to backend development server
// '/api': 'http://localhost:3000'
// },
contentBase: path.join(__dirname, 'public'), // boolean | string | array, static file location
compress: true, // enable gzip compression
//historyApiFallback: true, // true for index.html upon 404, object for multiple paths
hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin
//https: false, // true for self-signed, object for cert authority
//noInfo: true, // only errors & warns on hot reload
// ...
},
devtool:'none'/'source-map' //
devtool:'eval-source-map'// 7. externals
//
externals: {
jquery: 'jQuery'
}
//
import $ from 'jquery';
$('.my-element').animate(...);부록
1. loader 분류 목록
파일 불 러 오기
raw - loader: 텍스트 파일 의 내용 을 코드 에 불 러 옵 니 다 file - loader: 파일 을 한 폴 더 에 출력 합 니 다. 코드 에서 상대 URL 을 통 해 출력 된 파일 을 참조 합 니 다. url - loader: file - loader 와 유사 하지만 파일 이 작은 경우 base 64 방식 으로 파일 내용 을 코드 에 주입 할 수 있 습 니 다.source - map - loader: 정지점 디 버 깅 에 편리 하도록 추가 Source Map 파일 을 불 러 옵 니 다. svg - inline - loader: 압축 된 SVG 내용 을 코드 에 주입 합 니 다. node - loader: Node. js 원생 모듈. node 파일 을 불 러 옵 니 다.image - loader: 그림 파일 을 불 러 오고 압축 합 니 다.json - loader: JSON 파일 을 불 러 옵 니 다.Yml - loader: YML 파일 을 불 러 옵 니 다.
컴 파일 모드
handlebars - loader: Handlebars 모드 를 함수 로 컴 파일 하여 되 돌려 줍 니 다.markdown - loader: Markdown 파일 을 HTML 로 변환 합 니 다.
스 크 립 트 언어 변환
babel - loader: ES6 를 ES5 로 바 꾸 고 3 - 1 에서 ES6 언어 를 사용 하 는 것 에 대해 소개 합 니 다.ts - loader: TypeScript 를 JavaScript 로 변환 합 니 다. 3 - 2 TypeScript 언어 에서 만 났 습 니 다.awesome - type escript - loader: TypeScript 를 JavaScript 로 변환 하면 ts - loader 보다 성능 이 좋 습 니 다.coffee - loader: Coffee Script 를 JavaScript 로 변환 합 니 다.
스타일 파일 변환
css - loader: CSS 를 불 러 오고 모듈 화, 압축, 파일 가 져 오기 등 기능 을 지원 합 니 다.style - loader: CSS 코드 를 JavaScript 에 주입 하고 DOM 작업 을 통 해 CSS 를 불 러 옵 니 다.sas - loader: SCSS / SAS 코드 를 CSS 로 변환 하여 3 - 4 SCSS 언어 를 사용 하 는 것 에 대해 소개 합 니 다.postcss - loader: 확장 CSS 문법, 차세 대 CSS 사용, 3 - 5 사용 PostCSS 에서 소개 합 니 다.less - loader: Less 코드 를 CSS 코드 로 변환 합 니 다.stylus - loader: Stylus 코드 를 CSS 코드 로 변환 합 니 다.
검사 코드
eslint - loader: ESLint 를 통 해 JavaScript 코드 를 검사 하고 3 - 16 검사 코드 에 소개 합 니 다.tslint - loader: TSLint 를 통 해 TypeScript 코드 를 검사 합 니 다.mocha - loader: Mocha 테스트 용례 코드 를 불 러 옵 니 다.coverjs - loader: 테스트 보급률 을 계산 합 니 다.
기타
vue - loader: Vue. js 단일 파일 구성 요 소 를 불 러 옵 니 다. 3 - 7 Vue 프레임 워 크 에서 소개 합 니 다.i18n - loader: 다 중 언어 버 전 을 불 러 오고 국제 화 를 지원 합 니 다.ignore - loader: 일부 파일 을 무시 하고 3 - 11 구축 동 구성 응용 에서 소개 합 니 다.ui - component - loader: 필요 에 따라 UI 구성 요소 라 이브 러 리 를 불 러 옵 니 다. 예 를 들 어 antd UI 구성 요소 라 이브 러 리 를 사용 할 때 Button 구성 요소 만 사용 했다 고 모든 구성 요 소 를 포장 하지 않 습 니 다.
2. 자주 쓰 는 플러그 인
행동 수정 에 사용
context - replacement - plugin: require 문 구 를 수정 하여 파일 을 찾 을 때 기본 행동 을 합 니 다.ignore - plugin: 일부 파일 을 무시 하 는 데 사 용 됩 니 다.
최적화
extract - text - webpack - plugin: 자 바스 크 립 트 의 CSS 코드 를 추출 하여 단독 파일 에 prepack - webpack - plugin: 페 이 스 북 의 Prepack 을 통 해 출력 된 자 바스 크 립 트 코드 성능 을 최적화 하고 uglifyjs - webpack - plugin: UglifyES 를 통 해 ES6 코드 를 압축 하고 웹 pack - parallel - uglify - plugin: 다 중 프로 세 스 를 통 해 UglifyJS 코드 압축 을 실행 하여 구축 속 도 를 높 입 니 다.imagemin - webpack - plugin: 그림 파일 을 압축 합 니 다.웹 팩 - pritesmith: 플러그 인 으로 사이다 그림 을 만 듭 니 다.ModuleConcatenationPlugin: Webpack Scope Hoisting 기능 을 엽 니 다. dll - plugin: DDL 의 사상 을 참고 하여 구축 속 도 를 대폭 향상 시 킵 니 다. hot - module - replacement - plugin: 모듈 열 교체 기능 을 엽 니 다.
기타
serviceworker - webpack - plugin: 웹 페이지 에 오프라인 캐 시 기능 을 추가 합 니 다. stylelint - webpack - plugin: 프로젝트 에 stylelint 를 통합 합 니 다. i18n - webpack - plugin: 웹 페이지 에 국제 화 를 지원 합 니 다.provide - plugin: 환경 에서 제공 하 는 전역 변수 에서 모듈 을 불 러 옵 니 다. 해당 하 는 파일 을 가 져 오지 않 아 도 됩 니 다.웹 - webpack - plugin: 한 페이지 에 출력 HTML 을 편리 하 게 사용 할 수 있 습 니 다. html - webpack - plugin 보다 좋 습 니 다.
배치 집합
var path = require('path')
var webpack = require('webpack')
//
const WebpackMonitor = require("webpack-monitor");
const HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
mode: ' "production" | "development" | "none"',
entry: {
a: "./app/entry-a",
b: ["./app/entry-b1", "./app/entry-b2"]
},
output: {
path: path.resolve(__dirname, "dist"), // string,
filename: "bundle.js", // string
filename: "[name].js", // (entry point)（ ？）
filename: "[chunkhash].js", //
publicPath: "",
publicPath: "https://cdn.example.com/"
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
// loader CSS
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: ['style-loader', 'css-loader', 'postcss-loader'],
include: path.join(__dirname, './src'),
exclude: /node_modules/
})
},
{
test: /\.(png|jpg|gif|svg|bmp|eot|woff|woff2|ttf)$/,
loader: {
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
},
{
test: /\.(png|jpg|gif|svg|bmp|eot|woff|woff2|ttf)$/,
loader: {
loader: 'url-loader',
options: {
limit: 5 * 1024, // > limit file-loader, url-loader
outputPath: 'images/' //
}
}
},
{
//
test: require.resolve('jquery'), // require resolve
use: {
loader: 'expose-loader',
options: '$'
}
}
]
},
plugins: [
//
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
filename: "vendor-[hash].min.js"
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: false
}
}),
// css
new ExtractTextPlugin({
filename: "build.min.css",
allChunks: true
}),
new WebpackMonitor({
capture: true, // -> default 'true'
target: "../monitor/myStatsStore.json", // default -> '../monitor/stats.json'
launch: true, // -> default 'false'
port: 3030 // default -> 8081
}),
//html
new HtmlWebpackPlugin({
template: "index.html",
title: "My App",
filename: "assets/admin.html",
chunks: ["app"],
excludeChunks: ["dev-helper"]
})
],
devServer: {
//proxy: { // proxy URLs to backend development server
// '/api': 'http://localhost:3000'
// },
contentBase: path.join(__dirname, "public"), // boolean | string | array, static file location
compress: true, // enable gzip compression
//historyApiFallback: true, // true for index.html upon 404, object for multiple paths
hot: true // hot module replacement. Depends on HotModuleReplacementPlugin
//https: false, // true for self-signed, object for cert authority
//noInfo: true, // only errors & warns on hot reload
// ...
},
devtool: "eval-source-map", //
//
externals: {
jquery: "jQuery"
}
};기타
타 오 바 오 npm 미 러 설정
$ npm install -g cnpm --registry=https://registry.npm.taobao.org적합 하 다
cnpm i postcss-import postcss-url autoprefixer postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext cssnano postcss-viewport-units cssnano-preset-advanced -D
npm install viewport-units-buggyfill
var hacks = require('viewport-units-buggyfill/viewport-units-buggyfill.hacks');
require('viewport-units-buggyfill').init({
hacks: hacks
});이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Qiita API v2를 Ajax에서 사용하기위한 webpack 설정 (로컬 개발 환경 전용)에서는 Qiita의 기사 목록, 사용자 세부 정보, 기사를 '좋아요'한 사람 목록 및 재고가 있는 사람 목록을 검색할 수 있습니다. Qiita 화면에서 기사를 재고한 사람을 볼 수 없기 때문에 API를 통해 기사를 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
