webpack笔记

最新推荐文章于 2024-03-14 23:10:33 发布

横石拦浪

最新推荐文章于 2024-03-14 23:10:33 发布

阅读量66

点赞数

分类专栏： node.js

本文链接：https://blog.csdn.net/qq_20786911/article/details/104579550

版权

node.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

当前Web开发面临的困境
1、文件依赖关系错综复杂
2、静态资源请求效率低
3、模块化支持不友好
4、浏览器对高级Javascript特性兼容程度较低

在这里插入图片描述

在这里插入图片描述

自动打包生成的出口文件没有放在物理磁盘上而是放在内存中

在这里插入图片描述

在这里插入图片描述

webpack.config.js

const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const htmlPlugin=new HtmlWebpackPlugin({
  template:'./src/index.html',
  filename:'index.html'
})
const VueLoaderPlugin =require('vue-loader/lib/plugin')
module.exports={
  mode:'development',
  entry:path.join(__dirname,'./src/index.js'),
  output:{
    path:path.join(__dirname,'./dist'),
    filename:'bundle.js'
  },
  plugins:[htmlPlugin,new VueLoaderPlugin()],
  module:{
    rules:[
      {test:/\.css$/,use:['style-loader','css-loader']},
      {test:/\.vue$/,use:['vue-loader']}
    ]
  }
}

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>Document</title>
  <script src="/bundle.js"></script>
</head>
<body>

    <ul>
      <li>这是第1个li</li>
      <li>这是第2个li</li>
      <li>这是第3个li</li>
      <li>这是第4个li</li>
      <li>这是第5个li</li>
      <li>这是第6个li</li>
      <li>这是第7个li</li>
      <li>这是第8个li</li>
      <li>这是第9个li</li>
    </ul>
  </hr>
    <div id="app"></div>
</body>
</html>

index.js

import $ from 'jquery'
import './index.css'
import Vue from 'vue'
import App from './components/App.vue'
$(function(){
  $('li:odd').css('backgroundColor','yellow');
  $('li:even').css('backgroundColor','lightblue');
})

const vm=new Vue({
  el:'#app',
  render:h=>h(App)
})

在这里插入图片描述
package.json

{
  "name": "webpack_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server",
    "build":"webpack -p"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.4.1",
    "vue": "^2.6.11",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11"
  },
  "devDependencies": {
    "css-loader": "^3.4.2",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^1.1.3",
    "vue-loader": "^15.9.0",
    "vue-template-compiler": "^2.6.11",
    "webpack-dev-server": "^3.10.3"
  }
}

执行npm run build后在dist目录下生成对应的项目

横石拦浪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack笔记

当前Web开发面临的困境1、文件依赖关系错综复杂2、静态资源请求效率低3、模块化支持不友好4、浏览器对高级Javascript特性兼容程度较低自动打包生成的出口文件没有放在物理磁盘上而是放在内存中webpack.config.jsconst path=require('path');const HtmlWebpackPlugin=require('html...
复制链接

扫一扫

专栏目录