webpack入门

webpack中文文档
webpack官网

了解webpack相关

什么是webpack

  • webpack是一个模块打包器(bundler)
  • 在webpack看来,前端所有的资源文件(js/json/css/img/less/…)都会作为模块处理
  • 它将根据模块的依赖关系进行静态分析,生成对应的静态资源

理解loader

  • webpack本身只能加载JS/JSON模块,如果要加载其他类型的文件(模块),就需要使用对应的loader进行转换/加载
  • loader本身也是运行在node.js环境中的javascript模块
  • 它本身是个函数,接受源文件作为参数,返回转换得结果
  • loader一般以xxx-loader的方式命名,xxx代表了这个loader需要做的转换功能,比如json-loader

配置文件(默认)

  • webpack.config.js是一个node模块,返回一个json格式的配置信息对象

插件

  • 插件可以完成一些loader不能完成的功能。
  • 插件的使用一般是在webpack的配置信息plugins选项中指定。
  • CleanWebpackPlugin: 自动生成HTML文件
  • UgligyJSPlugin: 压缩js文件

安装webpack

# 全局安装
# 不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本,并且在使用不同的 webpack 版本的项目中,可能会导致构建失败。
npm install webpack -g
# 局部安装
npm install webpack --save-dev

如果你使用 webpack 4+ 版本,你还需要安装 CLI。

npm install --save-dev webpack-cli

编译打包应用

  • 创建入口src/js/entry.js
  • 创建主页面dist/index.html
    • <script type="text/javascript" src="bundle.js"></script>
  • 编译js
webpack src/js/entry.js dist/bundle.js

添加js/json文件

  • 创建第二个js: src/js/math.js
    export function square(x) {
      return x * x;
    }
    
    export function cube(x) {
      return x * x * x;
    }
    
  • 创建json文件: src/json/data.json
    {
      "name": "Tom",
      "age": 12
    }
    
  • 更新入口js : entry.js
    import {cube} from './math'
    import data from '../json/data.json'
    //注意data会自动被转换为原生的js对象或者数组
    document.write("entry.js is work <br/>");
    document.write(cube(2) + '<br/>');
    document.write(JSON.stringify(data) + '<br/>')
    
  • 编译js:
    webpack src/js/entry.js dist/bundle.js
    

使用webpack配置文件

  1. 根目录下创建webpack.config.js文件
    const path = require('path'); //path内置的模块,用来设置路径。
    
    module.exports = {
      entry: './src/js/entry.js',   // 入口文件
      output: {                     // 输出配置
      	filename: 'bundle.js',      // 输出文件名
      	path: path.resolve(__dirname, 'dist')   //输出文件路径配置
      }
    };

配置npm命令package.json

"scripts": {
      "build": "webpack"
 },

打包应用

npm run build

打包css和图片文件

  • 安装样式的loader
npm install css-loader style-loader --save-dev
npm install file-loader url-loader --save-dev
#补充:url-loader是对象file-loader的上层封装,使用时需配合file-loader使用。

大图无法打包到entry.js文件中,index.html不在生成资源目录下。
页面加载图片会在所在目录位置查找,导致页面加载图片时候大图路径无法找到
解决办法:
1. 使用publicPath : ‘dist/js/’ //设置为index.html提供资源的路径,设置完后找所有的资源都会去当前目录下找。
2. 将index.html放在dist/js/也可以解决。

自动编译打包

  • 利用webpack开发服务期工具webpack-dev-server
  • 下载
npm install --save-dev webpack-dev-server
  • webpack.config.js配置
devServer:{
	contentBase: './dist'
},
  • package.json配置
"start": "webpack-dev-server --open"
  • 编译打包应用并运行
npm start

使用webpack插件

  • 常用的插件
    • 使用html-webpack-plugin根据模板html生成引入script的页面
    • 使用clean-webpack-plugin清除dist文件夹
  • 下载
npm insatll --save-dev html-webpack-plugin clean-webpack-plugin
  • webpack.config.js配置
const HtmlWebpackPlugin = require('html-webpack-plugin'); //自动生成html文件的插件
const CleanWebpackPlugin = require('clean-webpack-plugin'); //清除之前打包的文件   
plugins: [
	new HtmlWebpackPlugin({template: './index.html'}),
	new CleanWebpackPlugin(['dist']),
]
  • 打包运行项目
npm run build
npm start
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值