标签：col 怎么办 模板 var 文件名 type view file 文件夹
module.exports = { /** * 打包模式，不配置会警告，但底层还是会去配置默认的，就是production * production: 压缩模式，被压缩的代码 * development: 开发模式，不压缩的代码 * */ mode: ‘development‘, // 这个文件要做打包，从哪一个文件开始打包 entry: ‘./src/index.js‘, plugins: [new HtmlWebpackPlugin()], // 打包文件要放到哪里去，就配置在output这个对象里 output: { // 打包好的文件名字 filename: ‘bundle.js‘, /** * 打包出的文件要把他放到哪一个文件夹下，path后面要放一个绝对路径 * __dirname指的是webpack.config.js所在的当前目录的这个路径 * 下面这个结合就是一个绝对路径 */ path: path.resolve(__dirname, ‘dist‘) } }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Webpack App</title> </head> <body> <script type="text/javascript" src="bundle.js"></script></body> </html>
html里面还引入了bundle.js。而且在src里面我并没有这个index.html.这就是webpack里面插件的作用
var root = document.getElementById(‘root‘); import ‘./index.scss‘; root.innerHTML = ‘<div class="iconfont iconfangdajing">abc</div>‘;
plugins: [new HtmlWebpackPlugin({ template: ‘src/index.html‘ })],
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>html template</title> </head> <body> <div id=‘root‘></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>html template</title> </head> <body> <div id=‘root‘></div> <script type="text/javascript" src="bundle.js"></script>
</body> </html>
可以惊讶的看到id为root的标签插入进去了。这是为什么呢？
output: { filename: ‘dist.js‘, path: path.resolve(__dirname, ‘dist‘) }
npm install clean-webpack-plugin -D
plugins: [
new HtmlWebpackPlugin({ template: ‘src/index.html‘ }), new CleanWebpckPlugin()
],
标签：col 怎么办 模板 var 文件名 type view file 文件夹
原文地址：https://www.cnblogs.com/wzndkj/p/10745406.html
