深入浅出webpack教程系列_安装与基本打包用法和命令参数详解

webpack，我想大家应该都知道或者听过，Webpack是前端一个工具,可以让各个模块进行加载,预处理,再进行打包。现代的前端开发很多环境都依赖webpack构建，比如vue官方就推荐使用webpack.废话不多说，我们赶紧开始吧.

第一步、安装webpack

新建文件夹webpack->再在webpack下面新建demo->命令行切换到demo目录，使用npm init --yes 初始化项目的package.json文件，然后执行npm install webpack --save-dev

第二步、全局安装webpack(3.5.6版本): npm install webpack@3.5.6 -g 安装完成之后用webpack -v 查看webpack的版本

第三步、新建一个index.js文件，输入一个函数，弹出一些信息，然后调用函数，最后用webpack 打包( webpack index.js index.bundle.js )：把index.js文件打包成index.bundle.js

就会在当前的目录下面生成index.bundle.js文件.

第四步、新建一个index.html文件，然后引入index.bundle.js 就能使用这个js文件了

第五步、把两个js文件一起打包合并

另外在当前目录下面新建一个calc.js文件，然后在用module.exports导出

然后在index.js文件中用var oCalc = require( './calc.js' )引入calc.js, 在调用函数oCalc.add( 10, 20 ), 那现在就有了两个函数在index.js中了， 再次执行命令

webpack index.js index.bundle.js， 合并打包之后， 重新刷新下index.html，是不是弹出了add函数的结果呢？

第六步、loader的使用

在当前目录下新建style.css文件，然后用require引入index.js文件中， 执行一次打包(webpack index.js index.bundle.js)，这个时候会报错，报错信息显示为（你需要loader去处理css文件）.

第七步、安装与使用loader

我们需要安装两个loader，css-loader,style-loader( 安装命令: npm install css-loader style-loader --save-dev )， 再用require加载

再次执行一次打包( webpack index.js index.bundle.js )，然后刷新index.html文件， 看看是否css文件中的body{ background: red } 生效了呢(浏览器body的背景变红)？

第八步、更详细的打包信息

webpack打包，后面可以跟很多参数，如:

--progress: 打包进度

--display-modules: 打包的模块

--colors: 是否彩色显示 打包提示信息

--display-reasons: 打包原因

--watch: 自动监控文件变化

等等，还有很多，可以参考官网

后面还有插件，配置等等很多项目开发中的常见的知识额

以上这篇深入浅出webpack教程系列_安装与基本打包用法和命令参数详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解webpack介绍&安装&常用命令

    webpack系列目录 webpack 系列 二:webpack 介绍&安装 webpack 系列 三:webpack 如何集成第三方js库 webpack 系列 四:webpack 多页面支持 & 公共组件单独打包 webpack 系列 五:webpack Loaders 模块加载器 webpack 系列 六:前端项目模板-webpack+gulp实现自动构建部署 基于webpack搭建纯静态页面型前端工程解决方案模板, 最终形态源码见github: https://github.com

  • webpack独立打包和缓存处理详解

    webpack独立打包和缓存处理详解

    前言 先前写了一篇webpack入门的文章<webpack入门必知必会>,简单介绍了webpack拆分.打包.压缩的使用方法.本文将在上篇文章的基础上进一步讲解在使用webpack构建的项目中存在的优化方案与解决方法. 上篇文章中写了一份webpack最基本的配置文件来打包压缩我们的代码: var path = require('path'); module.exports = { entry: './app/index.js', output: { filename: 'bundle.js'

  • Webpack执行命令参数详解

    Webpack执行命令参数详解

    一.概述 前面的章节我们讲解了webpack的安装.webpack.config.js的 基本配置.webpack执行命名以及require方法的使用,不 知道大家有没有发现,当我们每次修改或者新增一个js文件的时候,就会重新执行一下webpack 命令进行编译,这种方式非常的麻烦,这样整个项目下来岂不是要执行百万次.接下来我们会讲解webpack相关的参数,避免这个情况. 二.参数详解 在webpack执行命令之后可以添加一些参数,这些参数都有自己的作用,下面是参数列表: $ webpack

  • 深入浅出webpack教程系列_安装与基本打包用法和命令参数详解

    深入浅出webpack教程系列_安装与基本打包用法和命令参数详解

    webpack,我想大家应该都知道或者听过,Webpack是前端一个工具,可以让各个模块进行加载,预处理,再进行打包.现代的前端开发很多环境都依赖webpack构建,比如vue官方就推荐使用webpack.废话不多说,我们赶紧开始吧. 第一步.安装webpack 新建文件夹webpack->再在webpack下面新建demo->命令行切换到demo目录,使用npm init --yes 初始化项目的package.json文件,然后执行npm install webpack --save-de

  • Go基础教程系列之import导入包(远程包)和变量初始化详解

    Go基础教程系列之import导入包(远程包)和变量初始化详解

    import导入包 搜索路径 import用于导入包: import ( "fmt" "net/http" "mypkg" ) 编译器会根据上面指定的相对路径去搜索包然后导入,这个相对路径是从GOROOT或GOPATH(workspace)下的src下开始搜索的. 假如go的安装目录为/usr/local/go,也就是说GOROOT=/usr/local/go,而GOPATH环境变量GOPATH=~/mycode:~/mylib,那么要搜索net

  • MySQL系列多表连接查询92及99语法示例详解教程

    MySQL系列多表连接查询92及99语法示例详解教程

    目录 1.笛卡尔积现象 2.连接查询知识点概括 1)什么是连接查询? 2)连接查询的分类 3.内连接讲解 1)等值连接:最大特点是,连接条件为等量关系. 2)sql92语法和sql99语法的区别. 3)非等值连接:最大特点是,连接条件为非等量关系. 4)自连接:最大特点是,一张表看作两张表. 4.外连接讲解 1)什么是外连接,和内连接有什么区别? 2)外连接的分类 前面两天带着大家换了一个口味,带着大家学习了pyecharts的原理和部分图形制作.今天我们继续回归带你学MySQL系列,带着大家继

  • CentOS 7 安装并配置 MySQL 5.6的步骤详解

    Linux使用MySQL Yum存储库上安装MySQL 5.6,适用于Oracle Linux,Red Hat Enterprise Linux和CentOS系统. 一.全新安装MySQL 1.添加MySQL Yum存储库 将MySQL Yum存储库添加到系统的存储库列表中.这是一次性操作,可以通过安装MySQL提供的RPM来执行.跟着这些步骤: 1.1.到MySQL官网下载MySQL Yum存储库(https://dev.mysql.com/downloads/repo/yum/). 1.2.

  • Mysql 5.7.18安装方法及启动MySQL服务的过程详解

    Mysql 5.7.18安装方法及启动MySQL服务的过程详解

    MySQL 是一个非常强大的关系型数据库.但有些初学者在安装配置的时候,遇到种种的困难,在此就不说安装过程了,说一下配置过程.在官网下载的MySQL时候,有msi格式和zip格式.Msi直接运行安装即可,zip则解压在自己喜欢的目录地址即可.在安装这两种的时候,都需要配置才能用.以下介绍主要是msi格式默认的地址:C:\Program Files\ mysql-5.7.18-win32. 一．在安装或者解压后,需要配置环境变量,过程如下:我的电脑->属性->高级系统设置->高级->

  • yum安装CDH5.5 hive、impala的过程详解

    一.安装hive 组件安排如下: 172.16.57.75 bd-ops-test-75 mysql-server 172.16.57.77 bd-ops-test-77 Hiveserver2 HiveMetaStore 1.安装hive 在77上安装hive: # yum install hive hive-metastore hive-server2 hive-jdbc hive-hbase -y 在其他节点上可以安装客户端: # yum install hive hive-server2

  • Android安装apk文件并适配Android 7.0详解

    Android安装apk文件并适配Android 7.0详解 首先在AndroidManifest.xml文件,activity同级节点注册provider: <provider android:name="android.support.v4.content.FileProvider" android:authorities="${applicationId}.file_provider" android:exported="false"

  • webpack将js打包后的map文件详解

    类似于这样的map文件 由webpack自动生成 参数: devtool: '#eval-source-map',//映射js到原文件 由于打包后的js调试不方面,所以应用此,自动映射报错到原文件 还是很有用的 同样的css设置如下 { test: /\.css$/, loader: 'style-loader!css-loader?sourceMap' } 以上这篇webpack将js打包后的map文件详解是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴

  • 基于webpack.config.js 参数详解

    webpack.config.js文件通常放在项目的根目录中,它本身也是一个标准的Commonjs规范的模块. var webpack = require('webpack'); module.exports = { entry: [ 'webpack/hot/only-dev-server', './js/app.js' ], output: { path: './build', filename: 'bundle.js' }, module: { loaders: [ { test: /\.

随机推荐