webpack3基本使用

基本使用

目录结构

webpackdemo1
	-dist
	-src
		-main.js
		-index.html

cd到webpackdemo1的目录下,执行以下命令

# 全局安装webpack3
cnpm i webpack@3 -g

# 初始化
npm init -y

# 安装jquery
cnpm i jquery@2 -S

main.js

import $ from 'jquery'

$(function () {
    $(document.body).css("background", "pink")
})

main.js不能直接在浏览器运行,需要使用webpack编译

# webpack 源文件 目标文件
webpack ./src/main.js ./dist/bundle.js

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>webpack</title>
</head>

<body>

    <script src="../dist/bundle.js"></script>
</body>

</html>

使用配置文件

每次修改main.js文件后,重新编译都需要写命令,很麻烦,这时候可以使用配置文件

在webpackdemo1目录下新建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"
    }
}

后面每次重新编译,直接输入以下命令即可

webpack
发布了237 篇原创文章 · 获赞 132 · 访问量 58万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览