1-webpack-node.js导入导出

目录

1. webpack是什么,有哪些同类工具

   1. webpack项目打包工具,项目构建工具,有什么作用
   • 构建单页应用(disk) npm i http-server -g
   • 代码压缩
   • ...... (2) 同类工具
   • 百度fis3
   • grunt
   • gulp

   2. webpack最大的特点

      1. 一切皆模块

2. webpack安装

   • 安装node(node提供了npm)

   • 设置淘宝镜像: node.js的模块(插件)存放在网站,https://www.npmjs.com,淘宝镜像会同步该网站的模块 设置方法: npm config set registry http://registry.npm.taobao.org/

   • 文档地址: https://www.webpackjs.com

   • npm i webpack -g (-g全局安装, --save-dev安装到本目录)

   • npm i webpack-cli -g

     ps: 有时打包的时候提示xxx not fund 解决方案:

     • 方法一: 安装缺的模块 npm i xxx --save-dev
     • 方法二: 把webpack和webpack-cli卸载后重装,有时它们出问题了,丢失了某些东西
     • 卸载方法npm uninstall webpack -g
npm uninstall webpack-cli -g

3. nodejs模块系统

• 导出 cat.js

const cat = {
 age: 2,
 name: '白猫' 
} 
module.exports = cat;//导出m1.js里的cat

• 导入到 index.js

 const aa = require('./cat.js');
 consoe.log(aa.name);

• 打开命令提示符,进入index.js所在目录,运行node index.js 看是否打印出"白猫"

webpack的核心概念

webpack的核心概念有四个: 入口和出口, 模式, loader, 插件

1. 入口和出口(输出) demo1

   • 新建一个文件夹

   • 初始化package.json
npm init -y

   • 新建webpack.config.js文件(固定的),配置入口和出口

     • 入口: 项目从哪里开始打包,打包的过程中,把相关的文件全部打成一个包, ps:入口文件通常叫main.js
     • 出口: 打包完成之后,文件名叫什么,放到哪里

   • 在项目的目录运行打包命令webpack
     

     图五.jpg

2. 模式(环境) mode配置(详细请看webpack文档) demo1

   1. mode: 'development'开发环境
      2.mode: 'production' 生产环境

3. loader 加载器(解释器)

   • 在webpak世界里,一切皆模块

   • webpack默认只认识js模块,其它的模块都需要相应的loader来解析(解释)

   • 配置css-loader(步骤)

     1. 新建demo2
     2. 初始化package.json
     3. 配置入口和出口
     4. 配置css-loader
     • 在npmjs.com找到css-loader,安装上面的说明进行配置
     • 配置好之后,执行打包命令
     • 新建一个html文件把打包出来的js文件放进去html运行检查效果
     • 注:css-loader依赖style-loader,所以要安装style-loader
npm i style-loader --save-dev

   • 配置less-loader

     • 配置方法类似css-loader

   • 错误信息 You may need an appropriate loader to handle this file type 你需要配置一个合适的loader

4. plugins 插件 demo3

   • html插件html-webpack-plugin

     • 安装npm i html-webpack-plugin --save-dev
     • 导入html-webpack-plugin模块
     • 配置(webpack文档)
     • 踩坑: Cannot find module 'webpack/lib/node/NodeTemplatePlugin' 解决方案 npm link webpack --save-dev

   • webpack.DefinePlugin 配置全局变量

5. alias别名配置(为什么@能代替src)

6. dev-server demo4

   • 安装 npm i webpack-dev-server -g

   • 配置htmlWebpackPlugin

   • 配置devServer(看webpack文档)

   • 运行命令 webpack-dev-server

   • 配置 npm run dev启动命令 (或者npm run start是怎么来的)

     在package.json的scripts里配置的