代码目录结构如下图：
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>
