웹 팩의 자동 컴파일링 세 가지 방식
7039 단어 webpack
앞말
, yarn run build, , ? , :
자동 컴파일 방식
관찰 모드
패키지에서요.json에 관찰 모드를 추가한 npmscript 스크립트
"scripts": {
"watch": "webpack --watch",
"build": "webpack"
}
:yarn run watch
:
:
웹 서버
web
yarn add webpack-dev-server -D
package.json web npm script
"scripts": {
"watch": "webpack --watch",
"build": "webpack",
"dev": "webpack-dev-server --open"
}
webpack.config.js devServer
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const ManifestPlugin = require('webpack-manifest-plugin')
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)
module.exports = {
// , bundle
entry: {
app: './src/index.js',
print: './src/print.js'
},
// ,
devServer: {
contentBase: './dist'
},
plugins: [
// dist
new CleanWebpackPlugin(['dist']),
// html-webpack-plugin index.html
new HtmlWebpackPlugin({
title: 'Document'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
:yarn run dev
: +
웹팩 중간부품
webpack express
yarn add express webpack-dev-middleware -D
package.json web npm script
"scripts": {
"watch": "webpack --watch",
"build": "webpack",
"dev": "webpack-dev-server --open",
"server": "node server.js"
}
webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const ManifestPlugin = require('webpack-manifest-plugin')
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)
module.exports = {
// , bundle
entry: {
app: './src/index.js',
print: './src/print.js'
},
plugins: [
// dist
new CleanWebpackPlugin(['dist']),
// html-webpack-plugin index.html
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
//
publicPath: '/'
}
}
server.js
const express = require('express')
const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')
const app = express()
const config = require('./webpack.config.js')
const compiler = webpack(config)
// express webpack webpack
app.use(webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath
}))
app.listen(8080, () => {
console.log('listening on port 8080
')
})
:yarn run server
:
: +
총결산
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.