webpack3 安装配置、基本应用

亦凉 2021-07-24 21:17 696阅读 0赞

webpack
    	构建工具
    	(1)自带模块换(commonjs规范)
    	(2)编译es6->es5,jsx-es5
    	(3)自带服务器,webpack-dev-server
    	(4)react,vue使用该环境
    
    安装webpack
    1、安装全局webpack
    	cnpm/npm install -g webpack@3.x
    
    2、项目初始化package.json
    	npm init -y
    
    3、安装项目依赖的webpack
    	cnpm install -D webpack@3.x
    4、项目根目录创建两个文件夹src和dist
    	src:源码文件
    	dist:编译之后的文件
    5、编写代码
    	src文件下的app.js文件内容:document.write('hello webpack');
    6、执行webpack
    	webpack 入口文件 出口文件
    	例:webpack src/app.js dist/boundle.js

代码示例:

**页面添加一个div示例:**

nodejs文件:

module.exports=function(){ 
    	var hello=document.createElement('div');
    	hello.innerHTML='hello webpack3.x';
    	return hello;
    }

待打包文件:

var hello=require('./hello.js');
    document.getElementById('root').appendChild(hello());

命令行打包代码:

webpack src/app.js dist/boundle.js

引入打包后文件,因为要使用页面元素,所以要放在最后

<html>
    <head>
    	<meta charset="utf-8">
    	<title ></title>
    </head>
    <body >
    
    	<div id='root'>
    	</div>
    
    	<script src='boundle.js'></script>
    
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，696人围观）

还没有评论，来说两句吧...

相关阅读

相关 Webpack基本配置

安装webpack 全局安装全局安装 `npm install webpack -g` 指定版本安装 `npm install webpack@3.6.0 -g

曾经终败给现在/ 2023年01月07日 07:21/ 0 赞/ 266 阅读

相关 Webpack基本配置--打包资源

webpack打包资源笔记一、Webpack简介 1.1webpack是什么 Webpack是一种前端资源构建工具，一个静态资源打包器，在Webpack看来

浅浅的花香味﹌/ 2022年12月31日 01:19/ 0 赞/ 260 阅读

相关 webpack生产环境基本配置

webpack.config.js: const { resolve }=require("path") //提取css代码为单独文件 const M

痛定思痛。/ 2022年09月12日 10:48/ 0 赞/ 225 阅读

相关 webpack5基本配置详解

1.entry--入口起点 1.string 单入口 entry : './src/js/index.js', 打包形成一个chunk文件，生成一个b

「爱情、让人受尽委屈。」/ 2022年09月12日 09:53/ 0 赞/ 186 阅读

相关 webpack3插件安装和配置

基本安装 mkdir webpack-config && cd webpack-config npm init -y cnpm install -

﹏ヽ暗。殇╰゛Y/ 2022年06月09日 20:45/ 0 赞/ 286 阅读

相关 react+webpack项目基本配置

1、`npm-init` 生成package.json文件 2、安装项目依赖 `npm intsall --save-dev react react-dom web

矫情吗；*/ 2022年05月26日 07:43/ 0 赞/ 245 阅读

相关 webpack（1）之基本配置

简介 webpack是一个模块打包机，它会从指定入口文件开始，递归的寻找JavaScript模块以及其他一些浏览器无法直接运行的扩展语言（Sass， TypeScri

Love The Way You Lie/ 2022年01月20日 08:01/ 0 赞/ 204 阅读

相关 webpack的postcss的基本应用

PostCss是什么？ PostCSS在webpack中的基本应用一、PostCss是什么？如果有深入学习PostCss需求的话可以参考大漠的资料：[

我就是我/ 2021年12月04日 07:07/ 0 赞/ 217 阅读

相关 webpack3 安装配置、基本应用

webpack 构建工具 (1)自带模块换(commonjs规范) (2)编译es6->es5,jsx-es5 (3)自带服务器

亦凉/ 2021年07月24日 21:17/ 0 赞/ 696 阅读

相关 webpack3 服务器配置

即可在服务器提供的网址，打开项目所在文件，可视化 1、全局安装webpack服务器 cnpm -g install webpack-de

喜欢ヅ旅行/ 2021年07月24日 14:39/ 0 赞/ 402 阅读