在项目中引入webpack打包工具

最新推荐文章于 2023-12-23 11:08:20 发布

Hello，C++！

最新推荐文章于 2023-12-23 11:08:20 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/qq_23350817/article/details/83375054

版权

代码目录结构如下图：
在这里插入图片描述

CSS目录包含:
在这里插入图片描述

js目录包含：
在这里插入图片描述

webpack.config.js配置：

var webpack=require('webpack');  
var path=require('path');
 
module.exports = {
    entry: "./js/previewComment.js",
    output: {
        path: __dirname + "/dist",
        filename: "webpack-Comment.js"
    },
    module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
	    { test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=50000&name=[path][name].[ext]'}
        ]
    },
    performance: {
        hints:false   
    },
    plugins: [
      new webpack.ProvidePlugin({
          "$": "jquery",     // 写到这里可以全局js引用"$"
          "jQuery": "jquery",
          "window.jQuery": "jquery",
          "doT": "dot"      //同上
      })
  ]
    
  

};

需要安装各种插件： npm install style-loader css-loader dot

主js文件：

"use strict"

require("../css/bootstrap.css");
require("../css/previewComment.css");

require("./jquery-3.3.1.min.js");
require("./bootstrap.min.js");
require("./doT.min.js");


$(function () {
   
    var labels =  [
    "Question",
    "Documentation"
    ];
    
    var dat = JSON.stringify(labels);
    console.log(dat);
    var tmp = JSON.parse(dat);
    
    console.log(tmp);
    
})

测试的HTML：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
	<meta charset="UTF-8">
	<title>Comment Detail</title>
	
	<script src="./dist/webpack-previewComment.js" type="text/javascript" ></script>

	<script id="commentTmpl" type="text/x-dot-template">
		11111
	</script>

</head>

<body>
	<div id="operate_div" class="task-list">

	</div>
	<div>
	    Hello World!!!
	</div>
</body>

</html>

Hello，C++！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在项目中引入webpack打包工具

代码目录结构如下图：CSS目录包含:js目录包含：webpack.config.js配置：var webpack=require('webpack'); var path=require('path'); module.exports = { entry: "./js/previewComment.js", output: { path: __...
复制链接

扫一扫