웹 패키지 실행 설정 (1)
- webpack nodejs ， webpack node.exe
- webpack node.exe
- webpakc ， ( )
웹 패키지 설치 방법
{
"name": "01webpack",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
// npm run develop webpack.develop.config.js
"develop": "webpack --config webpack.develop.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-loader": "^7.1.0",
"less": "^2.7.2",
"less-loader": "^4.0.4",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.5.0"
}
}
nodejs의 모듈화 개발 학습(main.js 의존calc.js 쓰기)
1、 nodejs .js
2、calc.js
function add(x,y){return x + y;}
module.exports = add;
3、main.js calc.js add
calc.js
// webpack
var add = require('./calc.js');
// console.log(add(2,3));
// dom
var v1obj = document.getElementById('v1');
var v2obj = document.getElementById('v2');
var btobj = document.getElementById('bt');
var resobj = document.getElementById('res');
btobj.onclick = function(){
//
var v1Val = (v1obj.value - 0);
var v2Val = (v2obj.value - 0);
resobj.value = add(v1Val,v2Val);
}
웹팩의 기본 사용 방식
.js cmd ， webpack .js .js
： cmd webpack ，
： webpack ，webpack webpack.config.js
：
1、webpack.config.js
module.exports={
entry:path.resolve(__dirname,'src/main.js'), ---main.js
output: {
path: path.resolve(__dirname, 'dist'), --- dist , bundle.js
filename: 'bundle.js',
},
2、 webpack.config.js cmd， webpack
웹 패키지로 css 파일 패키지 완성하기
：
node.exe package.json ，
：
1、 cnpm i --save-dev
--save-dev package.json devDependencies
2、 cnpm i --save
--save package.json dependencies
：
1、 cnpm init package.json
2、cnpm i style-loader css-loader --save-dev
2、 style-loader css-loader webpack.config.js ，webpack loader
webpack.config.js ( webpack.config.js )
：
1、cnpm install sass-loader node-sass --save-dev
2、sass-loader webpack.config.js loader
： sass sass-loader .css
style-loader css-loader
sass ，
style-loader!css-loade!sass-loader
{
test:/\.scss$/, //
loader:'style-loader!css-loader!sass-loader' // sass
}
웹 패키지를 이용하여less 파일 패키지 완성하기
：
1、cnpm install less-loader less --save-dev
2、less-loader webpack.config.js loader
： loader:'' loader ，
style-loader!css-loade!less-loader
웹 패키지로 url () 가져오기 자원 파일 패키지 완료
：
background-image: url(../imgs/home.png)
webpack url-loader ， url-loader file-loader，
：
1、npm i url-loader file-loader --save-dev
2、url-loader webpack.config.js loader
웹팩을 이용하여es6회전es5 완성
：
1、npm install babel-core babel-loader babel-preset-es2015 babel-plugin-transform-runtime --save-dev
：babel-plugin-transform-runtime .vue
main.js 설정
// webpack
// main.js dom ，
var add = require('./calc.js');
// site.css webpack site.css
require('./1.css');
require('./site1.scss');
require('./site2.less');
// console.log(add(2,3));
// dom
var v1obj = document.getElementById('v1');
var v2obj = document.getElementById('v2');
var btobj = document.getElementById('bt');
var resobj = document.getElementById('res');
btobj.onclick = function(){
//
var v1Val = (v1obj.value - 0);
var v2Val = (v2obj.value - 0);
resobj.value = add(v1Val,v2Val);
}
webpack.config.js 설정
var path = require('path');
module.exports = {
entry:path.resolve(__dirname,'src/main.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module:{
loaders:[
{
// .js es6 es5 ，node_moudels
test:/\.js$/, //
// loader:'babel-loader?presets[]=es2015', // ， .vue ， css-loader .css ， style-loader
loader:'babel-loader',
exclude:/node_modules/ , //node_modules .js ，
},
{
// css
test:/\.css$/, //
loader:'style-loader!css-loader' // css-loader .css ， style-loader
},
{
// sass
test:/\.scss$/, //
loader:'style-loader!css-loader!sass-loader' // sass
},
{
// less
test:/\.less$/, //
loader:'style-loader!css-loader!less-loader' // sass
},
{
// url()
test:/\.(png|jpg|gif|ttf)$/, // url ， url
// loader:'url-loader' // base64 build.js ， ， build.js ，
loader:'url-loader?limit=40000' // <40k base64 build.js ， >40k ， bulid.js
}
]
},
babel:{
presets: ['es2015'],
plugins: ['transform-runtime'] // .vue
}
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
