您的位置：首页 > 其它

webpack基本配置和使用（好蠢走了好多弯路）

2020-06-07 04:30 330 查看
昨晚看b站视频的时候就跟着一起配置webpack，由于教学视频中使用的是3.6.0版本，我用nmp下的是最新的@4.*版本，webpack的官方文档又看得我头疼，整了半小时也没搞明白。
好在今天一早起床神清气爽，妥协了绕过4.0，也算是成功配置好了webpack，记录下这个过程。
  1. 首先，在windows的cmd窗口下卸载掉之前装的webpack。
    2. 接下来全局安装webpack3.*版本。
    3. 完成上面两步其实已经解决大部分问题了，在项目目录下使用 
    webpack .\src\main.js .\dist\bundle.js
    就能在
    dist
    目录下自动生成一个
    bundle.js
    文件。为了之后使用方便，在项目根目录下补充一个名为
    webpack.config.js
    的配置文件。
const path = require('path')

module.exports={
entry:path.join(__dirname,'./src/main.js'),//入口
output:{
path:path.join(__dirname,'./dist'),
filename:'bundle.js'
}
}
  1. 下面是一个隔行变色小案例的实现
    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>
<!-- main中的代码，涉及到了ES6的新语法，浏览器不识别 -->
<!-- <script src="./main.js"></script> -->
<!-- 通过webpack这么一个前端构建工具，把main.js做了一下处理，生成了一个bundle.js的文件 -->
<script src="../dist/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>
<li>这是第10个li</li>
</ul>
</body>
</html>

main.js代码

//这里的main.js是我们项目的JS入口文件
import $ from 'jquery'

$(function(){
$('li:odd').css('backgroundColor','lightblue')
$('li:even').css('backgroundColor',function(){
return 'lightgreen'
})
})

注意：改变代码之后，在根目录的命令行窗口Powershell

webpack
回车一下即可
比如改变了色彩：
以上就是webpack@3.*版本的配置和案例实现过程。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航