一步步学习webpack 1

webpack-cli 依赖 webpack4.x.x
webpack 的安装webpack-cli 必须是全局的，不然运行webpack 命令时会提示安装webpack-cli,但是提示的是-d模式，即使安装了再次运行webpack还是会提示你安装webpack-cli；
配置文件 mode： development|production 表示编译模式
output 的path 值必须是 绝对路径，使用path.resolve(__dirname)+想要的路径即可，__dirname 是当前文件的路径，path.resolve是用来构建绝对路径的
在某个目录下执行webpack 就是默认 使用webpack.config.js 中的配置 调用webpack,也可以直接使用webpack api来调用
webpack.config.js
const path = require("path");
module.exports = {
entry:"./src/main.js",
output:{filename:"[name].js",path:path.resolve(__dirname, 'dist')},
mode:"production"}
package.json中 script可以加入
"start":"webpack webpack.config.js"
运行 npm  start 即可。其他的脚本需要使用 npm run xxnode 目前不支持 import语法，但webpack打包的文件支持import，也支持import某个文件中的 单独的一项（但实际上整个文件都会先执行一遍，而且js文件也会全部引入）
单纯使用 webpack 编译出来的js会将当前模块没有使用的变量和方法删除， dev js的结构是:(function(modules){xxxx
})({
"模块名":function(){"use strict" eval(模块代码)}//模块名 就是 import 时的 名字
})webpack编译出来的js如果含有es6代码是不会转换成ES5的，但是转换的文件中使用了 Object.defineProperty 导致ie9以下无法使用，ie9以下能使用，可以手动将Object.defineProperty转换一下（或者有其他配置）纯webpack 编译出来的 production 的js结构是
!function(e)
{}([function(){
依次摆放各模块的js}])
同样由于使用了Object.defineProperty 不支持ie9，还有使用了 xx.保留字 低版本ie也不支持

转载于:https://www.cnblogs.com/chillaxyw/p/9852637.html

一步步学习webpack 1相关推荐

一步步学习SPD2010--第十一章节--处理母版页（8）--从母版页创建网页
一步步学习SPD2010--第十一章节--处理母版页(8)--从母版页创建网页在SPD中,你可以使用许多不同的方法创建ASP.NET页面.然而,因为页面将是SP网站的一部分,你很可能想像其他页面一样 ...
webpack 占位符_通过示例学习Webpack：占位符图像模糊
webpack 占位符 by Kalalau Cantrell 通过Kalalau Cantrell 通过示例了解Webpack:占位符图像模糊 (Learn Webpack by Example: ...
一步步学习SPD2010--第十一章节--处理母版页（7）--管理Content Placeholders
一步步学习SPD2010--第十一章节--处理母版页(7)--管理Content Placeholders 正如我之前描述的,母版页在你的网站页面间,用来保持一致的外观.然而,母版页还有其他特殊的功能 ...
一步步学习SPD2010--第十一章节--处理母版页（10）--重置母版页到网站定义
一步步学习SPD2010--第十一章节--处理母版页(10)--重置母版页到网站定义在第一章节,你将内容页重置为网站定义.重置母版页到网站定义也没有什么不同.你丢失了在页面上做出的自定义,包括任何静 ...
从今天开始，学习Webpack，减少对脚手架的依赖(下)
问:这篇文章适合哪些人? 答:适合没接触过Webpack或者了解不全面的人. 问:这篇文章的目录怎么安排的? 答:先介绍背景,由背景引入Webpack的概念,进一步介绍Webpack基础.核心和一些常 ...
一步步学习SPD2010--第十章节--SP网站品牌化（9）--理解SP的CSS继承
一步步学习SPD2010--第十章节--SP网站品牌化(9)--理解SP的CSS继承和你在本书中处理的许多其他文件一样,corev4.css和其他样式表处在每个Web服务器的根目录中.如果你使用SP ...
基于asp.net + easyui框架，一步步学习easyui-datagrid——界面（一）
从这篇博客,我会一步步的为大家讲解,easyui框架中最常用的一个控件datagrid.在使用easyui框架时,datagrid是使用最多的控件,它不仅好用,关键是实用. 我为大家建立一个博客更新的 ...
js怎么定义combobox_好程序员web前端教程分享新手应该怎么学习webpack
好程序员web前端教程分享新手应该怎么学习webpack,什么是webpack?一句话概括:webpack是一个模块打包工具(module bundler).重点在于两个关键词"模块&quo ...
[译]开始学习webpack
写在前面: 文章翻译自petehunt大神的petehunt/webpack-howto,作为学习webpack的开始.fork了一份,翻译后的在这里https://github.com/zjzhom ...

一步步学习webpack 1

一步步学习webpack 1相关推荐

最新文章

热门文章