webpack学习（1）

1.新建项目webpack-demo，scr存放源代码，dist存放打包的代码。2.index.html中引入bundel.js

3.新建webpack.config.js文件，手写相应配置，文件路径要写绝对路径，加上__dirname.

4.进入项目路径，输入npm init

5.输入 npm install webpack --save-dev 在项目中安装webpack

6.输入webpack进行打包，自动生成bundel.js文件。

待续。。。

webpack学习（1）相关推荐

webpack学习之路
webpack学习之路当自己在学习webpack的时候,在网上发现中文的很详细的教程很少,于是便想将自己学习webpack的笔记记录整理下来,便有了这篇文章,希望对大家有所帮助,如果有错误,欢迎大家 ...
webpack学习笔记1
webpack学习笔记1:基本概念前言: 现在在日常的开发中,webpack已经是必不可少的东西了,现在的需求基本都是用webpack对资源进行打包整合,所以打算写一点关于webpack的东西,这是 ...
webpack学习(四) -- css tree shaking
css tree shaking 我们和webpack(三)一样,用案例说话安装css需要的两个loader,css-loader 和style-loader npm install css-loa ...
webpack学习之 style-loader / css-loader
继续我们上一篇的webpack学习,现在我们进一步学习其他的配置 css-loader:用于让webpack加载这个css文件安装:npm install css-loader -D / npm ...
webpack学习之2.自动编译、实时重载LiveReload、热替换HMR
代码沿用webpack学习之1.基础配置每次要编译代码时,手动运行 npm run build 就会变得很麻烦. webpack 中有几个不同的方式,可以在代码发生变化后自动编译代码: webpac ...
webpack学习：性能优化
本文内容如下性能优化相关内容如果你都有了答案,可以忽略本文章,或去webpack学习导图寻找更多答案性能优化两大方面一,开发环境性能优化优化: 构建速度,代码调试 HMR热模块更新(代码调试 ...
什么是loader? (webpack学习篇4)
什么是loader ? 官方把它定义为:用来将一段代码转换成另一段代码的webpack插件. 同时也给出了解释:虽然本质上说,loader也是插件,但因为webpack的体系中还有一个专门的名词就叫插 ...
webpack学习笔记（三）：监听文件变化并编译
在上一篇webpack学习笔记中主要认识了webpack配置文件中相关的基础配置和命令的执行.这次学习如何在文件发生变化时自动打包编译. 首先,我们来看一下配置文件 const path = requ ...
webpack学习笔记（二）：认识配置和命令执行
在上一篇webpack学习笔记中,直接在命令行中使用npx webpack对项目进行打包时所使用的配置都是默认的,入口文件默认是src目录下的index.js文件,输出文件默认是dist文件夹下的ma ...
修改html时webpack热更新,webpack学习之路（二）webpack-dev-server实现热更新
上一章对webpack的配置有了简单的认识. 这一章,我需要学习的是webpack热更新,因为在开发过程中,不希望当文件更改时,人肉去编译文件,刷新浏览器. webpack热更新 webpack-de ...

webpack学习（1）

webpack学习（1）相关推荐

最新文章

热门文章