在项目中引入webpack打包工具

简介: 在项目中引入webpack打包工具

代码目录结构如下图:

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>
相关文章
|
30天前
|
缓存 JavaScript 前端开发
js开发:请解释什么是Webpack,以及它在项目中的作用。
Webpack是开源的JavaScript模块打包器,用于前端项目构建,整合并优化JavaScript、CSS、图片等资源。它实现模块打包、代码分割以提升加载速度,同时进行资源优化和缓存。借助插件机制扩展功能,并支持热更新,加速开发流程。
20 4
|
1月前
|
前端开发
webpack如何设置devServer启动项目为https协议
webpack如何设置devServer启动项目为https协议
139 0
|
1月前
|
JavaScript 前端开发
webpack成长指北第9章---webpack如何对icon字体进行打包
webpack成长指北第9章---webpack如何对icon字体进行打包
31 1
|
1月前
|
前端开发 JavaScript
webpack成长指北第7章---webpack的css\less\scss样式打包
webpack成长指北第7章---webpack的css\less\scss样式打包
41 0
|
3月前
|
缓存 前端开发 JavaScript
「零基础」掌握Webpack:10个必学技巧,为前端项目保驾护航!(三)
「零基础」掌握Webpack:10个必学技巧,为前端项目保驾护航!
|
1月前
|
前端开发 JavaScript
webpack成长指北第8章---webpack的CSS Modules打包
webpack成长指北第8章---webpack的CSS Modules打包
19 0
|
2月前
|
前端开发 JavaScript 安全
|
2月前
|
前端开发 JavaScript Java
|
3月前
|
域名解析 JavaScript 前端开发
TypeScript笔记(3)—— 使用WebPack工具
TypeScript笔记(3)—— 使用WebPack工具
25 0
|
3月前
|
缓存 前端开发 JavaScript
「零基础」掌握Webpack:10个必学技巧,为前端项目保驾护航!(二)
「零基础」掌握Webpack:10个必学技巧,为前端项目保驾护航!