请用心练完这16个webpack小例子

最新推荐文章于 2023-01-15 13:37:03 发布

小可乐程序员

最新推荐文章于 2023-01-15 13:37:03 发布

阅读量235

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/weixin_45566319/article/details/101696899

版权

16个demo，webpack+react搭配使用

首先教大家2个新技能

1.按照正常github地址情况下，你的github本身不能访问目录。
例如要访问vue-demo下的vueCpu文件夹:github.com/holidaying/… （master是分支名）就可以访问。
2.github目录的制作
明确一个问题。一个标题就是一个目录名称
写法xx#不能少
题目名称的写法规则：abc demo->abc-demo,Abc-Demo->abc-demo。会忽略:和()即就是题目中所有可见字符的空格均用-连接，中、英文空格要分开，中文空格对应中文-。并且全为小写
步骤

首先，install Webpack 和 webpack-dev-server.

$ npm i -g webpack webpack-dev-server复制代码

Linux & Mac

$ git clone git@github.com:holidaying/webpack-demo.git

Windows

$ git clone https://github.com/holidaying/webpack-demo.git
:
$ cd webpack-demo
$ npm install复制代码
接下来就可以进行demo演示了.

$ cd demo01
$ webpack-dev-server复制代码
用浏览器访问 http://127.0.0.1:8080.

什么是webpack？

Webpack 是前端的打包工具类类似于 Grunt and Gulp.但是有区别，因为它是模块化构建机制，Webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

WebPack和Grunt以及Gulp相比有什么特性

其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。

Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，这个工具之后可以自动替你完成这些任务。

更多信息.

$ webpack main.js bundle.js复制代码
它的配置文件是 webpack.config.js.

// webpack.config.js
module.exports = {
 entry: './main.js',
 output: {
 filename: 'bundle.js'
 }
};复制代码

有了webpack.config.js,你可以不带参数使用webpack

$ webpack复制代码
一些命令行选项你应该知道。

webpack – 构建文件
webpack -p – 发布
webpack --watch – 监听项目
webpack -d – 包含 source maps方便调试
webpack --colors – 让打包界面更好看
去构建你的项目, 你可以把启动项写进package.json

// package.json
{
 // ...
 "scripts": {
 "dev": "webpack-dev-server --devtool eval --progress --colors",
 "deploy": "NODE_ENV=production webpack -p"
 },
 // ...
}复制代码

单文件入口
多文件入口
Babel-loader
CSS-loader
Image loader
CSS Module
UglifyJs Plugin插件
HTML Webpack Plugin and Open Browser Webpack Plugin
Environment flags环境变量
Code splitting代码分割
Code splitting with bundle-loader
Common chunk提取公共文件
Vendor chunk提取公共的第三方代码
externals全局变量
热模块替代/热更新
React router
Demo01: 单文件入口 (源码)

Webpack会入口文件进行打包成bundle.js.

例子, main.js 是单文件入口.

// main.js
document.write('<h1>Hello World</h1>');复制代码
index.html

<html>
 <body>
 <script type="text/javascript" src="bundle.js"></script>
 </body>
</html>复制代码

Webpack follows webpack.config.js to build bundle.js.

// webpack.config.js
module.exports = {
 entry: './main.js',
 output: {
 filename: 'bundle.js'
 }
};复制代码

启动服务, 访问 http://127.0.0.1:8080 .

$ webpack-dev-server复制代码
Demo02: 多文件入口(源码)

多个入口文件，实用于多个页面的应用

// main1.js
document.write('<h1>Hello World</h1>');
// main2.js
document.write('<h2>Hello Webpack</h2>');复制代码

index.html

<html>
 <body>
 <script src="bundle1.js"></script>
 <script src="bundle2.js"></script>
 </body>
</html>复制代码

webpack.config.js

module.exports = {
 entry: {
 bundle1: './main1.js',
 bundle2: './main2.js'
 },
 output: {
 filename: '[name].js'
 }
};复制代码

Demo03: Babel-loader (源码)

通过使用不同的loader，webpack通过调用外部的脚本或工具可以对各种各样的格式的文件进行处理(更多信息). 例如, Babel-loader Babel其实是一个编译JavaScript的平台可以将 JSX/ES6 文件转换成浏览器可以识别的js文件. 官方文档loaders.

main.jsx is a JSX 文件.

const React = require('react');
const ReactDOM = require('react-dom');
ReactDOM.render(
 <h1>Hello, world!</h1>,
 document.querySelector('#

最低0.47元/天解锁文章

小可乐程序员

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
请用心练完这16个webpack小例子

16个demo，webpack+react搭配使用首先教大家2个新技能1.按照正常github地址情况下，你的github本身不能访问目录。例如要访问vue-demo下的vueCpu文件夹:github.com/holidaying/… （master是分支名）就可以访问。2.github目录的制作明确一个问题。一个标题就是一个目录名称写法xx#不能少题目名称的写法规则：abc de...
复制链接

扫一扫