第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

babel官網(wǎng)：

https://babeljs.io/setup#installation

babel中文網(wǎng)：

https://www.babeljs.cn/

//?生成多個(gè)html
const?path?=?require('path');
const?HtmlWebpackPlugin?=?require('html-webpack-plugin');
const?{?CleanWebpackPlugin?}?=?require('clean-webpack-plugin');

module.exports?=?{
????entry:?{
????????app:?'./src/index.js',
????????print:?'./src/print.js',
????????a:?'./src/a.js',
????????b:?'./src/b.js',
????????c:?'./src/c.js',
????},
????output:?{
????????filename:?'js/[name].bundle.js',
????????path:?path.resolve(__dirname,?'dist'),
????????publicPath:?'http://cdn.com'
????},
????plugins:?[
????????new?CleanWebpackPlugin(),
????????new?HtmlWebpackPlugin({
????????????filename:?'a.html',
????????????//?html標(biāo)題
????????????title:?'this?is?a.html',
????????????//?模板
????????????template:?'index.html',
????????????inject:?'head',
????????????//?引用的js
????????????chunks:?['a']
????????????//?minify:?{
????????????//?????removeComments:?false,
????????????//?????collapseWhitespace:?false
????????????//?}
????????}),
????????new?HtmlWebpackPlugin({
????????????filename:?'b.html',
????????????title:?'this?is?b.html',
????????????template:?'index.html',
????????????inject:?'head',
????????????chunks:?['b']
????????????//?minify:?{
????????????//?????removeComments:?false,
????????????//?????collapseWhitespace:?false
????????????//?}
????????}),
????????new?HtmlWebpackPlugin({
????????????filename:?'c.html',
????????????title:?'this?is?c.html',
????????????template:?'index.html',
????????????inject:?'head',
????????????chunks:?['c']
????????????//?壓縮
????????????//?minify:?{
????????????//?????removeComments:?false,
????????????//?????collapseWhitespace:?false
????????????//?}
????????})
????],
};

const?path?=?require('path');
const?HtmlWebpackPlugin?=?require('html-webpack-plugin');
const?{?CleanWebpackPlugin?}?=?require('clean-webpack-plugin');

module.exports?=?{
????entry:?{
????????app:?'./src/index.js',
????????print:?'./src/print.js'
????},
????plugins:?[
????????new?CleanWebpackPlugin(),
????????new?HtmlWebpackPlugin({
????????????title:?'Output?Management',
????????????inject:?'head',
????????????//?壓縮
????????????minify:?{
????????????????//?刪除注釋
????????????????removeComments:?true,
????????????????//?去除空格
????????????????collapseWhitespace:?true
????????????}
????????})
????],
????output:?{
????????filename:?'js/[name].bundle.js',
????????path:?path.resolve(__dirname,?'dist'),
????????publicPath:?'http://cdn.com'
????}
};

const?path?=?require('path');
const?HtmlWebpackPlugin?=?require('html-webpack-plugin');
const?{?CleanWebpackPlugin?}?=?require('clean-webpack-plugin');

module.exports?=?{
????entry:?{
????????app:?'./src/index.js',
????????print:?'./src/print.js'
????},
????plugins:?[
????????new?CleanWebpackPlugin(),
????????new?HtmlWebpackPlugin({
????????????title:?'Output?Management',
????????????inject:?'head'
????????})
????],
????output:?{
????????filename:?'js/[name].bundle.js',
????????path:?path.resolve(__dirname,?'dist'),
????????//?可以為生產(chǎn)環(huán)境地址，執(zhí)行npm?run?build命令之后，dist目錄下?index.html中的js路徑會(huì)加上這個(gè)前綴
????????publicPath:?'http://cdn.com'
????}
};

自動(dòng)化生成項(xiàng)目中的html頁(yè)面

npm?install?--save-dev?html-webpack-plugin

參考網(wǎng)址：

（1）webpack插件列表：

https://www.webpackjs.com/plugins/，

（2）htmlWebpackPlugin插件介紹：

https://www.webpackjs.com/plugins/html-webpack-plugin/

（3）htmlWebpackPlugin插件配置：

https://github.com/jantimon/html-webpack-plugin#configuration

webpack.config.js

const?path?=?require('path');
const?HtmlWebpackPlugin?=?require('html-webpack-plugin');
const?{?CleanWebpackPlugin?}?=?require('clean-webpack-plugin');

module.exports?=?{
????entry:?{
????????app:?'./src/index.js',
????????print:?'./src/print.js'
????},
????plugins:?[
????????new?CleanWebpackPlugin(),
????????new?HtmlWebpackPlugin({
????????????title:?'Output?Management'
????????})
????],
????output:?{
????????//?加上js，可以使js和html分離開(kāi)來(lái)
????????filename:?'js/[name].bundle.js',
????????path:?path.resolve(__dirname,?'dist')
????}
};

參考網(wǎng)址：https://www.webpackjs.com/guides/output-management/

index.html

<!doctype?html>
<html>
<head>
????<title>Output?Management</title>
</head>
<body>
????<script?src="./app.bundle.js"></script>
</body>
</html>

index.js

import?_?from?'lodash';
import?printMe?from?'./print.js';

function?component()?{
????var?element?=?document.createElement('div');
????var?btn?=?document.createElement('button');

????element.innerHTML?=?_.join(['Hello',?'webpack'],?'?');

????btn.innerHTML?=?'Click?me?and?check?the?console!';
????btn.onclick?=?printMe;
????element.appendChild(btn);

????return?element;
}

document.body.appendChild(component());

webpack.config.js

const?path?=?require('path');

module.exports?=?{
????entry:?{
????????app:?'./src/index.js',
????????print:?'./src/print.js'
????},
????output:?{
????????filename:?'[name].bundle.js',
????????path:?path.resolve(__dirname,?'dist')
????}
};

print.js

export?default?function?printMe()?{
????console.log('I?get?called?from?print.js!');
}

// 清理輸出目錄

const?path?=?require('path');
const?HtmlWebpackPlugin?=?require('html-webpack-plugin');
const?{?CleanWebpackPlugin?}?=?require('clean-webpack-plugin');

module.exports?=?{
????entry:?{
????????app:?'./src/index.js',
????????print:?'./src/print.js'
????},
????plugins:?[
????????new?CleanWebpackPlugin(),
????????new?HtmlWebpackPlugin({
????????????title:?'Output?Management'
????????})
????],
????output:?{
????????filename:?'[name].bundle.js',
????????path:?path.resolve(__dirname,?'dist')
????}
};

package.json配置腳本

{
??"name":?"webpack-demo",
??"version":?"1.0.0",
??"description":?"",
??"main":?"index.js",
??"scripts":?{
????"test":?"echo?\"Error:?no?test?specified\"?&&?exit?1",
????"build":?"webpack?--config?webpack.dev.config.js"
??},
??"keywords":?[],
??"author":?"",
??"license":?"ISC",
??"devDependencies":?{
????"css-loader":?"^3.4.2",
????"style-loader":?"^1.1.3",
????"webpack":?"^4.41.5",
????"webpack-cli":?"^3.3.10"
??},
??"dependencies":?{
????"lodash":?"^4.17.15"
??}
}

// 指定config文件

webpack?--config?web.dev.config.js

或

npx?webpack?--config?webpack.dev.config.js

// webpack.config.js

const?path?=?require('path');

module.exports?=?{
????entry:?'./src/index.js',
????output:?{
????????filename:?'bundle.js',
????????path:?path.resolve(__dirname,?'dist')
????},
????module:?{
????????rules:?[
????????????//?加載css
????????????{
????????????????test:?/\.css$/,
????????????????use:?[
????????????????????'style-loader',
????????????????????'css-loader'
????????????????]
????????????},
????????????//?加載圖片
????????????{
????????????????test:?/\.(png|svg|jpg|gif)$/,
????????????????use:?[
????????????????????'file-loader'
????????????????]
????????????},
????????????//?加載字體
????????????{
????????????????test:?/\.(woff|woff2|eot|ttf|otf)$/,
????????????????use:?[
????????????????????'file-loader'
????????????????]
????????????}
????????]
????}
};

//加載?CSS
npm?install?--save-dev?style-loader?css-loader
npm?run?build

參考網(wǎng)址：https://www.webpackjs.com/guides/asset-management/

npm?init?-y
npm?install?webpack?webpack-cli?--save-dev
npx?webpack

參考網(wǎng)址：https://www.webpackjs.com/guides/getting-started/

<%= %>? 有等號(hào)直接取值，沒(méi)有等號(hào)直接運(yùn)行js代碼

css-loader使得webpack可以識(shí)別css文件

style-loader可以把生成 一個(gè)style標(biāo)簽并把css樣式插入進(jìn)style標(biāo)簽里面

webpack命令

webpack hello.js hello.bundle.js

webpack.config.js配置：

module.exports={

????entry: './src/script/main.js', // 打包的入口文件

????output: { // 打包后的文件

????????path: './dist/js', // 地址

????????filename: 'bundle.js' // 打包的文件名稱

}? ?

}