webpack构建工具初始化并运行简单的demo

webpack官网:https://webpack.js.org/

webpack是构建工具

安装webpack的前提:node,npm要安装

初始化项目

首先是初始化项目,创建一个文件夹,并且进入文件夹使用npm init进行初始化

mkdir q_webpack  //创建q_webpack文件夹
cd q_webpack  //进入该文件夹
npm init -y  //创建package.json,必须要有这个才能安装模块
npm install webpack --save-dev
npm install webpack-cli --save-dev  //4.x版本及以上要安装webpack-cli
上面两条命令可简写
npm install webpack webpack-cli -D

安装完后生成一下内容

输入webpack -v 正常情况下可以看到版本

如果提示

One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:....

解决方法:npm install --save-dev webpack-cli -g

创建src目录

cd q_webpack

mkdir src

创建index.html 和 webpack.config.js文件

touch index.html webpack.config.js

进入src目录,创建main.js show.js

cd src

touch main.js show.js

//index.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <div id="box"></div>
</body>

</html>
//show.js
const show = content => {
    const box = document.getElementById(‘box‘);
    box.innerHTML = `你好! ${content}`
};

export { show };
//main.js
import { show } from ‘./show‘;

show(‘kaivon‘);
//webpack.config.js
const path = require(‘path‘);

module.exports = {
    entry: ‘./src/main.js‘,
    output: {
        path: path.resolve(__dirname, ‘dist‘),
        filename: ‘boundle.js‘
    }
}

在控制台输入命令webpack,生成 boundle.js

在index.html里引入 boundle.js

//index.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <div id="box"></div>
    <script src="dist/boundle.js"></script>
</body>

</html>

原文地址:https://www.cnblogs.com/qjb2404/p/12233628.html

时间: 2024-10-05 04:40:43

webpack构建工具初始化并运行简单的demo的相关文章

webpack构建工具快速上手指南

最近在研究react项目,接触到webpack打包工具.刚接触的时候一脸茫然,经过最近的学习,下面我来带大家开启webpack入门之旅. webpack是什么 webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).样式(含less/sass).图片等都作为模块来使用和处理.当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成少量的 bundle - 通常只

webpack构建工具常见问题及解决方法

webpack构建工具常见问题及解决方法 在运用webpack开发项目的时候经常会遇到各种各样的问题,我对实际开发项目中实际遇到的一些问题 进行总结,希望能帮助到大家. ?? 1. 构建需要的包未添加依赖报错 Module not found:"xxx(例:react)" in "项目文件" ??这种情况是由于"xxx(例:react)"未添加依赖,解决办法如下: npm install xxx(react) --save 或 yarn add

深入浅出的webpack构建工具---PostCss(五)

一:PostCss是什么?  PostCss是一个样式处理工具,它通过自定义的插件和工具生态体系来重新定义css.它鼓励开发者使用规范的css原生语法编写代码,然后配置编译器转换需要兼容的浏览器版本,最后通过编译将源码转换为目标浏览器可用的css代码. 它和stylus的不同之处是它可以通过插件机制灵活地扩展其支持的特性,不像stylus的语法是固定的,它的用途非常多,比如css自动加前缀,使用下一代css语法等等. postcss官方有很多插件,查看插件(https://github.com/

深入浅出的webpack构建工具---babel之配置文件.babelrc(三)

阅读目录 一:理解 babel之配置文件.babelrc 基本配置项 二:在webpack中配置babel 回到顶部 一:理解 babel之配置文件.babelrc 基本配置项 1. 什么是babel? 它是干什么用的? ES6是2015年发布的下一代javascript语言标准,它引入了新的语法和API,使我们编写js代码更加得心应手,比如class,let,for...of promise等等这样的,但是可惜的是这些js新特性只被最新版本的浏览器支持,但是低版本浏览器并不支持,那么低版本浏览

深入浅出的webpack构建工具---DllPlugin DllReferencePlugin提高构建速度(七)

阅读目录 一:什么是DllPlugin 和 DllReferencePlugin?作用是什么? 二:在项目中如何使用 DllPlugin 和 DllReferencePlugin? 三:DllPlugin DllReferencePlugin使用在vue和vuex项目中 回到顶部 一:什么是DllPlugin 和 DllReferencePlugin?作用是什么? 在使用webpack进行打包时候,对于依赖的第三方库,比如vue,vuex等这些不会修改的依赖,我们可以让它和我们自己编写的代码分开

自动化构建工具—gulp的用法简单总结

把之前用到的gulp总结整理下,有时候说不出来的,就写出来吧,做个笔记,以后也可以慢慢补充 cnpm i --save-dev gulp 把nodejs模块写到package.json配置文件中,当保存到git仓库时,只需保存package.json即可 用到的gulp模块有:gulp-clean/gulp-concat/gulp-connect/gulp-cssmin/gulp-less/gulp-load-plugins/gulp-uglify/open 注:安装node模块是可批量安装的 

angular1结合webpack构建工具

目录结构 webpack.config.js const { resolve } = require('path') const webpack = require('webpack') const HtmlWebpackPlugin = require('html-webpack-plugin') const url = require('url') const publicPath = '' var ExtractTextPlugin=require('extract-text-webpac

一览新的 Android Gradle 构建工具:新的 DSL 结构 和 Gradle 2.5

译者地址:[翻]一览新的 Android Gradle 构建工具:新的 DSL 结构 和 Gradle 2.5 原文:First Look at New Android Gradle Build Tools: The new DSL structure and Gradle 2.5 双语对照地址: [翻-双语]一览新的 Android Gradle 构建工具:新的 DSL 结构 和 Gradle 2.5 翻译: MrFu 校验: MrFu Android Studio 1.3 的平台已经接近于稳

“流式”前端构建工具——gulp.js 简介

Grunt 一直是前端领域构建工具(任务运行器或许更准确一些,因为前端构建只是此类工具的一部分用途)的王者,然而它也不是毫无缺陷的,近期风头正劲的 gulp.js 隐隐有取而代之的态势.那么,究竟是什么使得 gulp.js 备受关注呢? Grunt 之殇 gulp.js 的作者 Eric Schoffstall 在他介绍 gulp.js 的 presentation 中总结了 Grunt 的几点不足之处: 插件很难遵守单一责任原则.因为 Grunt 的 API 设计缺憾,使得许多插件不得不负责一