webpack学习总结(一)

* webpack安装

1、安装最新node，node自带npm包管理器；

2、全局模式安装webpack（只有将webpack在全局模式下安装才能在命令行直接通过webpack执行命令）

$npm install webpack -g

3、切换到项目目录

4、然后在本地项目安装依赖包webpack（在本地项目中加载了依赖包才能在项目中通过require来引入webpack）

如果项目没有package.json,先通过npm init创建package.json，不在npm上发布项目，创建时命令行中出现的选项就不重要

* webpack使用,打包js模块

创建html文件，并在文件中引入打包文件bundle.js(项目有关的所有的文件打包之后合成这一个文件，html最后只引入这一个打包文件)

创建空的打包文件bundle.js、入口文件entry.js（所有的内容的显示入口）

配置webpack（配置之后在命令行执行命令时只需输入webpack，然后命令就会自动参考配置文件中配置选项来打包文件）

创建配置文件webpack.config.js

执行webpack命令打包文件：

运行index.html

* webpack打包其他类型的模块

webpack本身只能打包原生JavaScript模块，如果要打包其他类型的文件模块，例如：css、图片、json等，需要通过loader转换器将各种类型的资源转换成JavaScript模块。

参考资料：

webpack：http://webpackdoc.com/install.html

入门Webpack，看这篇就够了：http://www.jianshu.com/p/42e11515c10f

时间： 2024-12-20 12:13:37

webpack学习总结(一)的相关文章

webpack学习笔记一

webpack.gulp.grunt是前端打包功能工具:因为已经学习了gulp,而最近发现webpack很火,于是着手学习webpack.本篇是webpack学习笔记系列的第一篇,欢迎指教. 我是从慕课网以及官网文档相结合的方式学习的,从官方文档学到的第一个知识点是在使用webpack打包过程中,即使没有webpack.config,js这个文件也是可以的. 首先是全局安装webpack,cmd(如果是window系统,在任意位置)执行命令: npm install --g webpack或cn

webpack学习笔记八

webpack自动刷新浏览器 webpack开发服务器,是webpack官方提供的一个辅助开发工具,它可以自动监控项目下的文件,一旦有修改保存的操作,它就会自动执行打包命令,将我们的代码重新打包,并且需要的话还可以刷新浏览器. 首先我们安装webpack-dev-server 在CMD中安装执行npm intall webpack-dev-server -g 在项目目录执行安装依赖命令: npm install --save-dev webpack-dev-server 其中webpack-de

webpack学习笔记

webpack笔记 webpack学习笔记 1.全局安装 npm install webpack -g 2.作为项目依赖安装 npm install webpack --save-dev 3.安装css-loader.sass-loader.node-scss npm install css-loader sass-loader node-scss --save-dev 4.webpack配置 // webpack.config.js var path = require('path'); mo

webpack学习（五）—webpack+react+es6

如果你看过webpack学习系列的前一个文章,接下来做的东西会比较简单 :webpack学习(四)- webpack-dev-server react发展的很快,现在大部分开发react相关的项目,都会用到这个组合:webpack+react+es6 还是以一个项目举例,项目中的package.json是生成的,"devDependencies"都是自己安装加入,如果拷贝网上的资料,可以npm install直接生成.而为了一探react的具体开发流程,还是自己一个个安装比较好. 项目

前端小白webpack学习（一）

俗话说得好,好记性不如烂笔头. 之前就在学习中看过webpack的教程,然而一段时间没用,火速的忘光了.写这篇博文,做个总结,也让自己以后有个地方回顾. 看webpack之前,我先去看了一下官方文档,先了解一下webpack的几个概念.我是中英文文档搀着看的,一些小地方中文文档里没写,英文文档里都给了小提示.(下面的概念是我自己翻译总计的,略渣) concepts At its core, webpack is a static module bundler for modern JavaScr

webpack学习记录(十二)-区分不同环境

webpack学习记录(十二)-区分不同环境定义全局变量使用webpack内置的插件DefinePlugin 允许创建一个在编译时可以配置的全局常量. 用法 //在webpack.config.js中配置插件 new webpack.DefinePlugin({ PRODUCTION: JSON.stringify(true) }) //在index.js中使用定义的变量 if (!PRODUCTION) { console.log('Debug info') } if (PRODUCTIO

webpack学习记录(九)-小插件应用

webpack学习记录(九)-小插件应用 clean-webpack-plugin 每次输出之前先删除之前的目录,即每次输出都是最新的打包文件安装及配置 npm i clean-webpack-plugin -D // 注意该插件引入方式需要用解构赋值才有效 const {CleanWebpackPlugin} = require('clean-webpack-plugin') module.exports = { plugins: [ new CleanWebpackPlugin() ] }

webpack学习记录(十)-跨域

webpack学习记录(十)-跨域准备工作建一个简单的服务端 const express = require('express') let app = express() app.get('/api/user', (req,res) => { res.json({msg:'服务器启动'}) ) app.listen(3000) 发送一个请求 let xhr = new XMLHttpRequest() xhr.open('get','/api/user',true) xhr.onload =

webpack 学习

我的 webpack.config.js module.exports = { entry: [ './src/js/app.js', './src/js/my.js' ], output: { path: __dirname + '/output/', publicPath: "/output/", filename: 'main.js' }, module: { loaders: [ {test: /\.(jpg|png)$/, loader: "url?limit=81

webpack 学习心得（一）

Webpack 是一个模块打包器.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 因为本人也正在学习webpack ,所以此篇文章比较入门. 首先你想使用webpack 需要安装node,推荐最好使用的是4.0以上(为了避免依赖安装错误) npm install -g webpack 安装 webpack 你可以手动创建相应文件,也可以这样 mkdir webpackdemo cd webpackdemo 创建 webpackdemo 文件夹进入当前目录