-
查看全部
-
//?生成多個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標題 ????????????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'), ????????//?可以為生產環境地址，執行npm?run?build命令之后，dist目錄下?index.html中的js路徑會加上這個前綴 ????????publicPath:?'http://cdn.com' ????} };查看全部 -
自動化生成項目中的html頁面
npm?install?--save-dev?html-webpack-plugin
參考網址：
（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分離開來 ????????filename:?'js/[name].bundle.js', ????????path:?path.resolve(__dirname,?'dist') ????} };查看全部 -
參考網址：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 參考網址：https://www.webpackjs.com/guides/asset-management/
查看全部 -
npm?init?-y npm?install?webpack?webpack-cli?--save-dev npx?webpack 參考網址：https://www.webpackjs.com/guides/getting-started/
查看全部 -
<%= %>? 有等號直接取值，沒有等號直接運行js代碼
查看全部 -
css-loader使得webpack可以識別css文件
style-loader可以把生成 一個style標簽并把css樣式插入進style標簽里面
查看全部 -
webpack命令
webpack hello.js hello.bundle.js
查看全部 -
webpack.config.js配置：
module.exports={
????entry: './src/script/main.js', // 打包的入口文件
????output: { // 打包后的文件
????????path: './dist/js', // 地址
????????filename: 'bundle.js' // 打包的文件名稱
}? ?
}
查看全部
舉報
0/150
提交
取消