前端学习webpack

 

### 模块化
- 为了保证代码充分解耦，一个大的项目拆分成互相依赖的一个一个的小的模块，最后再通过简单的方式合并在一起
- 每一个js文件都可以看成一个单独的模块
在node这边（服务器端），提出CommonJs模块化规范
- 模块的引入 require (内置模块，第三方模块，自定义模块)
- 模块的导出 module.exports ||exports
浏览器:
- CMD sea.js AMD require.js
- UMD 处理兼容（require.js和CommonJS）
- es6module
  - 模块创建 （每个js文件就是一个模块）
  - 模块的引入(import)
    import {str} from "./a.js" 解构赋值的方式获取到导出的每个变量或方法
    import * as obj from "./a.js" obj.str
    import str2 from "./a.js"  对默认导出的变量起个别名
  - 模块的导出(export)
    export let str ="hello"
    export default str;
 
安装在项目里，尽量别安装在全局，在全局下容易引起版本的冲突

npm init -y 初始化本地配置文件 package.json文件
### webpack
npm install webpack --save-dev
 
 在package.json里配置启动webpack的命令->.bin ->webpack.cmd->webpack/bin/webpack.js->当前目录下(基于package.json文件)webpack.config.js
 
 在命令行 执行 npm run build 就能运行webpack
 
 webpack.config.js 是webpack配置文件 webpack所有的操作都根据这个配置文件进行的
 
 1.npm install webpack --save-dev
 2.package.json->"scripts": {
                     "build":"webpack"
                   },
 3.在项目下建一个webpack.config.js文件
 
 ### es6->es5
 - babel (babel-core 核心功能包 babel-loader babel解析器)
 npm install babel-core --save-dev
 npm install babel-loader --save-dev  --解析js
 
 在webpack配置下js的解析器是babel-loader
 -> {test:/\.js$/,use:"babel-loader",exclude:/node_modules/}
 
 presets(预设)指编译的规则,它是plugins集合
 npm install babel-preset-es2015 --save-dev ->es6转换es5
 npm install babel-preset-stage-0 --save-dev ->解析es7
 
 使用babel需要设置babel配置文件 .babelrc 在.babelrc设置presets和plugins
 
 ### 解析CSS
 css-loader（解析css） style-loader  (css代码放入style标签)
 
 ###解析less
 npm install less less-loader --save-dev
 
 ### 解析图片
 file-loader url-loader(依赖于file-loader)
 - 将图片转换成base64编码 最好限制下图片大小 -base64方式
 - 把图片重新命名然后再dist目录下输出 -请求图片地址的方式
 
 ### 字体图标

 ### html-webpack-plugin
 npm install html-webpack-plugin --save-dev
 根据html模板，自动把打包后的js插入html模板中,并且在dist目录下输出
 
 ### webpack-dev-server
 npm install webpack-dev-server --save-dev
 web服务器,代码更新时，自动打包，重新加载
 在package.json里设置操作这个服务的命令
 npm run dev

 

转载于:https://www.cnblogs.com/leigepython/p/9171511.html