webpack学习(一)

1.首先建立一个webpack项目,然后新建文件demo2,在demo2下新建src文件,index.html文件,初始化项目 (npm init --yes)得到package.json

2.全局安装webpack (npm install webpack -g),在项目文件下本地安装webpack(npm install webpack --save--dev),

3.在src下面新建js文件,分别创建两个js文件main.js和index.js 如下图所示:

4.在demo2下创建webpack.dev.config.js配置文件,注意此时的入口文件有index.js,main.js两个,要生成动态的index.html文件(即自动引入index.js和main.js). 需要引入html-webpack-plugin插件,通过npm install html-webpack-plugin --save--dev 下载,具体代码如下图所示:

entry:表示入口文件  output:表示输出文件  path表示路径  __dirname表示当前webpack.dev.config.js的绝对路径。filename表示文件名称.filename支持4种动态起名字的方式( id, name, hash, chunkhash )

5.将package.json里面的scirpt键对应的值改为:

{

"d" : "webpack --config webpack.dev.config.js --progress --display-modules --colors --display-reasons"

},

如下图所示:

6.执行npm run d 可得如下结果:

index.html自动引入输出的两个js文件:

在浏览器打开便看到引入的js文件产生的效果。

时间: 2024-10-08 23:45:10

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 文件夹 进入当前目录