webpack得介绍

最新推荐文章于 2023-11-06 20:29:41 发布

原创最新推荐文章于 2023-11-06 20:29:41 发布 · 239 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #webpack

前端同时被 3 个专栏收录

29 篇文章

订阅专栏

25 篇文章

订阅专栏

vue

3 篇文章

订阅专栏

Webpack的介绍

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 CMD 模块、ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

webpack安装

命令:

npm install webpack -g

Webpack的使用

基本演示

命令:

webpack math.js build.js

会把基于模块开发的math.js引用的外部模块合并到build.js中。

在index.html页面上直接引用build.js即可。

配置文件

在项目根目录下新建webpack.config.js 文件。这是 webpack默认的配置文件。将来在命令行运行webpack就会自动执行配置文件中的内容

module.exports = {
     entry: './app.js',   //打包的入口文件
     //设置打包以后的文件存储的位置
     output: {
         path: './bin',//打包文件存储的目录
         filename: 'build.js'   //文件名
     }
 };

webpack默认只能处理后缀 .js文件，想处理其他文件需要loader。

Webpack常用的Loader

1、打包css文件

初始化项目
cnpm init，生成package.js，记录开发依赖
下载style-loader和css-loader

cnpm install css-loader style-loader --save-dev 
//--save-dev 保存开发依赖

配置webpack.config.js文件

module.exports = {
     entry: './app.js',
     output: {
         path: './bin',   
         filename: 'build.js'
     },
     module: {
         loaders: [{
             test: /\.css$/,
             exclude: /node_modules/,//排除指定内容
        //css-loader 处理样式文件中的url()，即加载一个图片。把图片当成模块来处理  
        //style-loader把require(.css)代码，插入到网页中style
        //多个loader用!来做分割符
        
             loader: 'style-loader!css-loader'  //执行顺序从右向左
         }]
     }
 };

执行打包

webpack

2、autoprefixer-loader自动添加css前缀

下载
cnpm install autoprefixer-loader --save-dev
配置文件

 loader: 'style-loader!css-loader!autoprefixer-loader'

演示

添加私有前缀
a {
transition: transform 1s;
}
去除过期的自由前缀
-webkit-border-radius: 5px;
border-radius: 5px;

打包less

下载
cnpm install less-loader less --save-dev
配置文件

 loader: 'style-loader!css-loader!autoprefixer-loader!less-loader'

演示(.less文件)
@color: yellow;

body {
background-color: @color;
}

打包sass

下载
cnpm install sass-loader node-sass --save-dev
配置文件

 {
        test: /\.scss$/,   //配置后缀名
        loader: 'style-loader!css-loader!autoprefixer-loader!sass-loader'   //loader执行的顺序从右到左
      }

演示(.scss)
$color: red;

body {
background-color: $color;
}

url-loader

能处理任何类型的文件。一般是用来处理图片和字体

下载
cnpm install url-loader --save-dev

依赖file-loader
cnpm install file-loader --save-dev

配置文件

    
//如果不加limit参数设置，图片默认编译成base64的字符串(limit 单位 字节)但是如果图片太大，会造成页面内容负担。所以limit能帮我完美解决~
  {
        //设置处理不同类型的文件
        test: /\.(jpg|gif|png|eot|svg|ttf|woff|otf)$/,
        loader: 'url-loader?limit=80000' 
         
        //limit的作用，如果图片小于80k的文件，图片会被编译成base64的字符串，减少一次http请求
        //如果大于80000 不会编译成base64字符串  并且依赖于file-loader 会把图片复制到输出目录bin  
        
      }

!注意引用的路径(样式中引用的图片路径出问题)
运行index.html和打包的文件的路径不一致
如何解决？？？

处理图标字体
{
test: /.(png|jpg|eot|svg|ttf|woff|otf)/,
loader: ‘url-loader?limit=80000’ //可以简写’url?limit=20000’ 单位是字节
}

为什么要配置热加载服务器
1 自动打包
2 开启web服务器
3 自动在浏览器打开页面—index.html
4 热加载

实时打包和浏览器实时刷新

下载安装webpack-dev-server

cnpm install webpack-dev-server --save-dev
cnpm install webpack-dev-server -g

运行

webpack-dev-server --inline --hot --open --port 3000
热加载：代码一改，自动刷新

配置

在package.json中配置

 "scripts": {
        "dev": "webpack-dev-server --inline --hot --open --port 3000"
     }

配置之后，只需要在命令行中输入:npm run dev
方便快捷，当每次输入的命令过长的时候，可以在package.json文件中配置。

参数

inline 自动刷新
hot 热加载(代码一改，自动刷新)
open 自动在默认浏览器中打开
port 指定端口

运行

npm run dev

安装 html-webpack-plugin

在内存中生成打包内容index.html，并且自动打包编译的文件(app.js中引用的文件)

下载html-webpack-plugin

cnpm install html-webpack-plugin --save-dev

配置 webpack.config.js

    var htmlWebpackPlugin = require('html-webpack-plugin');

    plugins: [
        new htmlWebpackPlugin({
            title: '页面标题',  //生成页面标题
            filename: 'index.html',
            template: 'index1.html'
        })
     ]

ES6转ES5

下载

cnpm install babel-core babel-loader babel-preset-es2015 --save-dev
//包装能够转换.vue文件中的es6语法
cnpm install babel-plugin-transform-runtime --save-dev

配置 webpack.config.js

    loader里面配置
    {
        test: /\.js$/,
        exclude: /node_modules/,           //排除指定内容
        loader: 'babel-loader'
    }

    loader的同一级
    babel: {
        presets: ['es2015'],
        plugins: ['transform-runtime']   //为了转换.vue中的es6的语法
     }

常用到的ES6语法

导入外部文件，导入css文件

import './statics/css/style.scss';
import './statics/css/font-awesome.css';

导入一个js模块，接受一个对象

import obj from './add.js';

模块中导出对象

//ES6中导出模块中的对象
export default {
    add: add, 
    sub: sub
}

//简写
export default {
    add, sub
}

//更简洁的语法
export default {
    add(a, b) {
        return (a - 0) + (b - 0);
    },
    sub(a, b) {
        return (a - 0) + (b - 0);
    }
}

//ES6导入模块中的对象
import obj from './math.js';


//commonjs中的写法
module.exports = {
    add: add,
    sub: sub
}
//简写，属性名和属性值的名称相同
module.exports = {
    add, sub
}

模块中导出方法

//ES6导出方法
export function add() {}
export function sub() {}

//ES6中导入方法
import {add} from './math.js'


//commonjs中的写法
module.exports = {
    add: function(x, y) {
        return x + y;
    }
}

//导出方法简写
module.exports = {
    add(x, y) {
        return x + y;
    }
}