开放原子开发者工作坊

1.pc端中后台应用打包

npm组件在浏览器的js中不能直接引入，所以要借助webpack等工具

jsx在浏览器端也是无法直接解析，要用工具转换

页面打包速度和资源体积问题

 

4.构建工具需要原因:

转换es6语法、JSX

css前缀补全/预处理器

压缩混淆

图片压缩

 

5.webpack原因

github活跃量

社区生态丰富

配置灵活，插件化扩展

官方更新迭代快

 

6.零配置webpack:

只有entry和output,entry指定默认的entry为： ./src/index.js.

output指定默认的为： ./dist/main.js

 

8.

>//使用以下命令：

./node_modules/.bin/webpack

生成bundles.js文件.

下一步，在bundles.js同级目录下新建index.html文件，在此文件的script标签的src中引入bundles.js，用浏览器打开，即可

 

9.在package.json中增加“build”,执行“npm run build”,也可生产bundle.js文件

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"build":"webpack"

},

 

10.entry用法：

单入口：entry是一个字符串；多入口：entry是个对象（key-value）

 

11.Output用来告诉we'b'pack如何将编译后的文件输出到磁盘。

output的多入口配置：通过占位符确保文件名称的唯一，如[name].js

 

12.loaders:

webpack开箱即用只支持js和json两种文件类型，通过loaders去支持其他文件类型并且把它们转化成有效的模块，且可以添加到依赖图中。本身是一个函数，接受源文件作为参数，返回转换的结果。

babel-loader 转换ES6,ES7等js新特性语法

css-loader file-loader等等

module rules中test指定匹配规则，use指定使用的loader名称

 

13.plugins:

插件用于bundle文件的优化，资源管理和环境变量注入，作用于整个构建过程

任何loaders没法做的事情，可以用plugins完成

CommonChunkPlugin ZipWebpackPlugin....

 

14.mode:

mode指定当前的构建环境是production development还是none

设置mode可使用webpack内置的函数，默认为production

 

15.解析ES6 react jsx：

rules:[

{

test:/\.js$/,

use:'babel-loader'

}

]

 

//安装必要的文件：

npm i @babel/core @babel/preset-env babel-loader -D

 

*在vscode中的html文件中输入!，在弹出的下来提示中选择“!”，回车，就会出现一个默认的html文件模板出来！

 

//增加react的babel preset配置：

{

"preset":[

"@babel/preset-env",

"@babel/preset-react"

],

}

 

//安装必要的文件：

npm i react react-dom @babel/preset-react -D

 

16.解析CSS LESS SASS

css-loader用于加载.css文件，并且转换成commonjs对象

style-loader将样式通过<style>标签插入到head中

 

* <script src="./search.js" type="text/javascript"></script> //其中是type

 

rules: [

{

test: /.js$/,

use: 'babel-loader'

},

{

test:/.css$/,

use: [

'style-loader',

'css-loader'

]

},

{

test: /.less$/,

use: [

'style-loader',

'css-loader',

'less-loader'

]

}

]

 

//search.css search.less:

.search-text {

font-size: 20px;

color: #f00;

}