webpack学习笔记

webpack学习笔记

Administrator 44 2018-05-13

什么是webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。
image

安装webpack

全局安装,指定版本号,这里使用的是3.6.0,注意4.0版本部分使用命令有所不同

npm install webpack@3.6.0 -g

局部安装

npm install webpack@3.6.0 --save-dev

卸载

 npm  uninstall  webpack  -g

打包命令

#webpack 源地址 目标地址
webpack ./src/main.js ./dist/bundle.js

打包完成后会在目标目录下生成打包后的文件
3237e284eab6f5893245f771d67ca937.png

使用打包后的文件

<!DOCTYPE html>
<html lang="en">
    <head>    
        <meta charset="UTF-8">    
        <title>Title</title>
    </head>
    <body>
    <!--引入打包后的js文件-->
        <script src="dist/bundle.js"></script>
    </body>
</html>

模块化导入和导出

模块化规范

浏览器端的模块化

1…AMD(Asynchronous Module Definition,异步模块定义)
代表产品为:Require.js
2…CMD(Common Module Definition,通用模块定义)
代表产品为:Sea.js

服务器端的模块化CommonJS

服务器端的模块化规范是使用 CommonJS 规范:

使用 require 引入其他模块或者包
使用 exports 或者 module.exports 导出模块成员
一个文件就是一个模块,都拥有独立的作用域

ES6模块化

ES6模块化规范中定义:

每一个 js 文件都是独立的模块
导入模块成员使用 import 关键字
暴露模块成员使用 export 关键字
注意: 在一个模块中,只允许使用export default向外默认暴露一次成员,千万不要写多个export default,否则会报错

默认导出

let num = 10;
let name = '张三;

function show() {
  console.log('1111111111111')
}
//属性名和属性值一样,可以只写一个
export default {
  num,
  name,
  show
}

默认导入

import m1 from './test.js'

按需导出和导入

export let num = 998;
export let myName = "jack";
export function fn = function() { 
					 console.log("fn") 
				 }

import { num,fn as printFn ,myName } from "./test.js"

webpack的配置

我们建立好webpack的项目之后先要初始化s生成默认的package.json文件

在node开发中使用npm init会生成一个pakeage.json文件,这个文件主要是用来记录这个项目的详细信息的,它会将我们在项目开发中所要用到的包,以及项目的详细信息等记录在这个项目中。方便在以后的版本迭代和项目移植的时候会更加的方便。也是防止在后期的项目维护中误删除了一个包导致的项目不能够正常运行。使用npm init初始化项目还有一个好处就是在进行项目传递的时候不需要将项目依赖包一起发送给对方,对方在接受到你的项目之后再执行npm install就可以将项目依赖全部下载到项目里。话不多说我们就直接开始进行操作。

npm init

e4267885b56935b81be7984f4f1cc832.png


在根目录下创建webpack.config.js文件
187298f597c8514c0ab703e13130646a.png
配置文件内容 !!!注意__dirname 是两个下划线避免踩坑

//path 模块提供了一些实用工具,用于处理文件和目录的路径。 可以使用以下方式访问它:
const path = requier("path");
module.exports={    
    entry: "./src/main.js",      //入口文件模块路径
    output:{        
         path: path.resolve(__dirname ,"dist"),   //path.resolve() 方法会将路径或路径片段的序列解析为绝对路径__dirname是node内置变量    
    filename:"bundle.js"  //输出文件名 
    }
}

配置完成后就可以直接使用webpack命令进行打包了,他会自动在我们的webpack.config.js中配置的路径和文件名生成最终打包文件

webpack

打包命令的映射

可以自定义命令映射脚本,比如我们现在配置完打包的默认路径和文件名之后可以直接使用webpack命令打包了,然后我们可以在 package.json文件中配置命令脚本映射
为什么要配置命令映射:配置了映射之后,执行npm run build命令,会优先寻找本地开发环境中的webpack命令,如果是终端直接输入webpack命令,是直接用的全局环境

{
    "name": "meetwebpack",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack" //以后可以使用npm run build来实现webpack命令
    },
    "author": "",
    "license": "ISC"
}

使用
6c735c4b5edae5774793fb67a6743011.png

loader

使用webpack打包css

具体细节参考官方文档webpack官方文档
创建css文件,如新建文件./css/normal.css

body{
    background-color : red;
}

入口文件依赖css

require("./css/normal.css")

安装所需loader

安装所需loader,注意版本,版本与当前webpack版本不兼容会导致打包失败

npm install --save-dev style-loader //应用到DOM的loader
npm install --save-dev css-loader //加载css的loader

配置webpack.config.js

//path 模块提供了一些实用工具,用于处理文件和目录的路径。 可以使用以下方式访问它:
const path = require("path");
module.exports={
    entry: "./src/main.js",
    output:{
        path: path.resolve(__dirname ,"dist"),
        filename:"bundle.js"
    },
    //添加module配置,匹配css文件,使用刚刚安装的loader,注意style-loader必须在前
    module:{
        rules:[
            {
                test: /\.css$/,
                use: ['style-loader','css-loader' ]
            }
        ]
    }
}

打包测试:

npm run build

测试样式成功渲染页面

使用webpack打包图片

操作方式类似css,都是安装对应的loader然后打包即可,这里使用了url-loader和file-loader

url-loader和file-loader区别

url-loader有配置参数limit 8192,表示限制大小,低于8KB的文件将会被编译成base64的url字符串进行输出图片,如果被打包编译的图片超过limit限制的大小,需要安装file-loader,将会被打包成新的图片,并以MD5哈希值为文件名的图片,打包在dist目录中,此时可以在module中配置属性publicpath指定图片资源的url路径

//path 模块提供了一些实用工具,用于处理文件和目录的路径。 可以使用以下方式访问它:
const path = require("path");
module.exports = {
    entry: "./src/main.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
        publicPath:"dist/"  //图片大于limit限制时配置此路径
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "less-loader" // compiles Less to CSS
                }]
            },
            {
                test: /\.(png|jpg|gif|jpeg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 20000  //限定文件大小单位byte
                        }
                    }
                ]
            }
        ]
    }
}

ES6语法处理

安装babel-loader

npm install --save-dev babel-loader@7.0.0 babel-core babel-preset-es2015

webpack.config.js配置文件修改

{
      test: /\.js$/,
      //排除node_modules包内的js转换
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['es2015']
        }
      }
    }