간단한 웹 페이지 비계 초고
package.json
{
"name": "webpack-scaffold",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.28.7",
"file-loader": "^1.1.5",
"style-loader": "^0.19.0",
"url-loader": "^0.6.2",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
}
}
테스트 환경
build/dev.js
var webpack = require("webpack");
var config = require("../config/config.dev.js");
var WebpackDevServer = require('webpack-dev-server');
/* ======================================== method 1 ======================================== */
/*config.entry.unshift("webpack/hot/dev-server");
config.entry.unshift("webpack-dev-server/client?http://localhost:8080/");
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {
hot: true,
publicPath:"/",
contentBase:"../dist"
});*/
/* ======================================== method 2 ======================================== */
var options = {
contentBase: '../dist',
hot: true,
host: 'localhost',
port:8080
};
WebpackDevServer.addDevServerEntrypoints(config, options);
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, options);
server.listen(8080);
config/config.dev.js
var HtmlWebpackPlugin = require("html-webpack-plugin");
var CleanWebpackPlugin = require("clean-webpack-plugin");
var path = require("path");
var webpack = require('webpack');
var distDirName = "dist";
var distDir = "../"+distDirName;
var outputJsFileName = "result.js";
var outputHtmlFileName = "app.html";
var templateHtmlPath = "../template.html";
var entryFilePath = "../js/app.js";
var webpackConfig = {
entry: [entryFilePath],
output: {
path: path.resolve(__dirname, distDir),
filename: outputJsFileName
},
resolveLoader:{
// modules:["../../../npm_repository/node_modules"]
/* loader resolve loaders */
// modules:["node_modules","/workspace/npm_repository/node_modules"]
},
devServer: {
hot: true,
contentBase: distDir
},
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: "url-loader",
options: {
limit: 8192 // base64
}
}
]
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
// use: ["style-loader/url", "file-loader"]
}
]
},
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
// new CleanWebpackPlugin([distDirName],{
// root:path.resolve(__dirname,"../")
// }),
new HtmlWebpackPlugin({
filename:outputHtmlFileName,
template:templateHtmlPath
})
]
};
module.exports = webpackConfig;
생산 환경
build/build.js
var webpack = require("webpack");
var config = require("../config/config.product.js");
var compiler = webpack(config);
console.log("start building ...");
compiler.run(function(error,status){
if(error){
console.log(error);
return;
}
console.log(status.toString());
});
config/config.product.js
var HtmlWebpackPlugin = require("html-webpack-plugin");
var CleanWebpackPlugin = require("clean-webpack-plugin");
var path = require("path");
var webpack = require('webpack');
var distDirName = "dist";
var distDir = "../"+distDirName;
var outputJsFileName = "result.js";
var outputHtmlFileName = "app.html";
var templateHtmlPath = "../template.html";
var entryFilePath = "../js/app.js";
var webpackConfig = {
entry: entryFilePath,
output: {
path: path.resolve(__dirname, distDir),
filename: outputJsFileName
},
resolveLoader:{
// modules:["../../../npm_repository/node_modules"]
/* loader resolve loaders */
// modules:["node_modules","/workspace/npm_repository/node_modules"]
},
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: "url-loader",
options: {
limit: 8192 // base64
}
}
]
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
// use: ["style-loader/url", "file-loader"]
}
]
},
plugins: [
new CleanWebpackPlugin([distDirName],{
root:path.resolve(__dirname,"../")
}),
new HtmlWebpackPlugin({
filename:outputHtmlFileName,
template:templateHtmlPath
})
]
};
module.exports = webpackConfig;
html-webpack-plugin에서 사용하는 템플릿 파일template.html
html>
App
app.js
import style from "../css/app.css";
console.log("this is the index js .");
app.css
html,body{
height:100%;
margin:0;
padding:0;
}
#app{
position:relative;
min-height: 100%;
background-color:#f3f3f3;
}
#app .user-info{
position:relative;
height:60px;
padding-left:60px;
}
#app .user-info .user-logo{
position:absolute;
left:10px;
top:0;
bottom:0;
width:40px;
height:40px;
border-radius: 20px;
background:url(../images/pic.jpg) center center;
background-size:cover;
margin:auto;
}
#app .user-info .user-name{
height:100%;
line-height: 60px;
font-size:14px;
color:#8592a3;
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Portswigger의 연구실 작성: CSRF 토큰 보호를 사용한 기본 클릭재킹이 견습생 수준 실습에서는 일부 CSRF 토큰 보호가 있음에도 불구하고 클릭재킹에 취약한 웹사이트에서 계정 삭제 흐름을 악용합니다. 주어진 자격 증명으로 로그인하면 계정 페이지로 이동한 후 사용자 계정을 삭제하는 데...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.