weppack

2020-04-01 本文已影响0人吃肉肉不吃肉肉

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
从 webpack v4.0.0 开始，可以不用引入一个配置文件。然而，webpack 仍然还是高度可配置的。在开始前你需要先理解四个核心概念：

入口(entry)
输出(output)
loader
插件(plugins)

安装

确保安装了nodejs

项目文件环境

cd mypack
// 进入你的项目目录 mypack目录可以随意自己建立

npm init  
//  初始化项目文件夹 会创建一个package.js

本地安装

npm install --save-dev webpack
npm install --save-dev webpack-cli

对于大多数项目，我们建议本地安装

准备文件

-- dist 文件生成目录
---- index.html 

-- index.js 主入口文件
-- header.js 需要被index引入的文件

#  index.html
<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>第一个webpack页面</title>
</head>
<body>
 <script src="main.js"></script>   
</body>
</html>
<!--打包好的js名称默认是main.js-->

#  index.js
import {header} from './header.js'
document.body.append(header);

#  header.js
var header =document.createElement("div");
header.innerHTML="你好webpack from header";
export {header};

执行命令打开index.html

npx webpack index.js
// 在你的项目目录执行 这里的名称是 mypack

然后打开你的dist/index.html 查看网页文件
同时你会发现在 dist目录多个main.js这个打包生成好的js文件

使用配置文件

在项目目录新建一个webpack.config.js webpack默认配置文件

const path = require('path')
// 引入node的 path路径模块

module.exports={
    entry:'./index.js',
    // 指定文件的入口
    output:{
        filename:'main.js',
        // 定义文件名
        path:path.resolve(__dirname,'dist')
        // 定义文件夹 
        // __dirname获取当前目录
        // path.resolve 方法将路径或路径片段的序列解析为绝对路径
    }
    // 指定打包好的出口
}
// module.export node中导出模块的意思

# 以下为纯净版本
const path = require('path')
module.exports={
    entry:'./index.js',
    output:{
        filename:'main.js',
        path:__dirname+'/dist',
    }
}

执行命令npx webpack实现打包

配置 scripts

找到package.js 配置scripts

"scripts":{
    start:  "webpack"
}

这样我们就可以执行

npm run start
// yarn start

配置模式

const path = require('path')
module.exports={
    mode:'development', //开发模式
    // mode:'production',// 产品模式
    entry:'./index.js',
    output:{
        filename:'main.js',
        path:path.resolve(__dirname,'dist')

产品模式打包的大小要比生产模式要小的多。

 "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },

图片与文件处理

ile-loader可以解析项目中的url引入（不仅限于css）使之指向正确的文件

url-loader 会将小图片生成base64编码格式(url-loader封装了file-loader)

image-webpack-loader 插件可将大的图片进行压缩从而缩小打包体积

html-loader html 代码里处理 img 标签的 loader。

style.css

@import '../assets/font/iconfont.css';

div{ color:red;}
body{ background-image: url('../assets/sun.jpg');}

index.js

import {header} from './header.js'
import './css/style.css'
import './css/style.less'
import pic from './assets/pic1.jpg'
document.body.append(header);

var img = new Image();
img.src=pic;

// img.src=pic;
document.body.append(img);
var box = document.createElement("div");
box.innerHTML='<span class="iconfont icon-shouye1"></span> <span class="iconfont icon-shouye"></span>';
document.body.append(box);

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports={
    devServer: {
        contentBase: './dist',
     },
    optimization: {
        minimizer: [ new OptimizeCSSAssetsPlugin({})],
      },  
    // mode:'production',
    entry:'./src/index.js',
    output:{
        filename:'main-[hash].js',
        path:__dirname+'/dist'
    },
    module:{
        rules:[

            {
                test: /\.(png|jpg|gif|jpeg|ico)$/,
                use:[{loader:'url-loader',options:{limit:50000,name: 'img/[name].[hash:5].[ext]'}},'image-webpack-loader']
            },
            {
                test:/\.css$/,
                use:[MiniCssExtractPlugin.loader,/* 'style-loader', */'css-loader']
            },
            {
                test:/\.(eot|woff2|woff|ttf|svg)/,
                use:[{loader:'url-loader',options:{limit:10,name: 'font/[name].[hash:5].[ext]'}}],
            },
            {
                test:/\.less$/,
                use:[MiniCssExtractPlugin.loader,/* 'style-loader', */'css-loader','less-loader']
            }
        ]
    },
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
        new MiniCssExtractPlugin({
            filename: 'style.css',

          }),
    ]
}

babel 与react

@babel/core-babel核心模块
@babel/preset-env-编译ES6等
@babel/preset-react-转换JSX

cnpm i babel-loader @babel/core @babel/preset-env  @babel/plugin-transform-runtime   @babel/preset-react -D

 @babel/plugin-transform-runtime: 避免 polyfill 污染全局变量，减小打包体积
 @babel/polyfill: ES6 内置方法和函数转化垫片

cnpm i @babel/polyfill @babel/runtime -D

main.js

import ReactDom from 'react-dom'
import React,{Component} from 'react'
class App extends Component{
    constructor(props){
        super(props);
        this.state={num:1}
    }
    render(){
        return (<div>react <button onClick={
            ()=>{this.setState({num:++this.state.num})}
        }>{this.state.num}</button></div>)
    }
}
ReactDom.render(<App/>,document.getElementById("root"))

webpack.config.js

{ 
    test: /\.(js|jsx)$/, 
    use:['babel-loader'],
    exclude: /node_modules/ 
},

.bablerc

{
  "presets": ["@babel/preset-env","@babel/preset-react"],
}

压缩

optimize-css-assets-webpack-plugin css优化压缩

uglifyjs-webpack-plugin js压缩

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

optimization: {
    minimizer: [new UglifyJsPlugin(), new OptimizeCSSAssetsPlugin({}),],

      },

代码分割

optimization: {
    splitChunks: {
        chunks: "all", 
        // 所有的 chunks 代码公共的部分分离出来成为一个单独的文件},
},

sourceMap

当错误了，能够知道源代码在那一行 sourceMap 他是一个map关系，他知道dist/main。就是文件96行错误，对应src目录下index.js第一行

devtool:'cheap-module-eval-source-map',
建议
// development:'cheap-module-eval-source-map'
// production:'cheap-module-source-map'

按需导入js

等需要的时候异步加载 js 需要安装插件

cnpm install @babel/plugin-syntax-dynamic-import -D

配置 babelrc plugins

{
  "presets": ["@babel/preset-env","@babel/preset-react"],
  "plugins":["@babel/plugin-syntax-dynamic-import"]

}

在js使用

function getComponent(){
    return import(/* webpackChunkName:"jquery" */'jquery').then(({default:$})=>{
       return $;
    })
}
getComponent().then($=>{
    var el = $("<div>你好jquery</div>");
    $("body").append(el);
    el.click(()=>{
        alert("你好");
    })

})

也可以这么写

import('jquery')
.then(({default:$})=>{
    var el = $("<div>你好jquery</div>");
    $("body").append(el);
    el.click(()=>{
        alert("你好");
    })

})

Prefetch

Prefetch是告诉浏览器这是一个在未来可能使用到的资源。浏览器通常会在空闲状态取得这些资源，在取得资源之后搁在HTTP缓存以便于实现将来的请求

import时增加一条魔法注释即可：

 document.body.onclick=()=>getJq();
 function getJq(){
    import( /* webpackChunkName:"jquery", webpackPrefetch: true  */ 'jquery').then(({default:$})=>{

        $("div").click(()=>{
            alert("你好");
        })
    })
 }

环境变量

module.exports = （env）=>{
    if(env&&env.production){
        return merge(commonConfig,prod)
    }else{
        return merge(commonConfig,devConfig)
    }

}

build:"webpack --env.production --config ./build/webpack.config.comom.js"

Entry 与Output的配置

entry:'./src/index.js'

entry:{
    main:'./src/index.js',
    sub:'./src/index.js'
},
output:{
    publicPath:'http://www.js.com',
    // 配置根目录 默认是/ 可以配成相对目录./
    filename:'[name][hash].[ext ]'
    path:path.resolove(__dirname,'dist')
}

tree shaking

按需导入内容（摇树）
比如模块里面有个 a,b 两个模块，你只使用一个a 那么就导入a

webpack.config.js 配置

plugins:[
    optimization:{
        usedExports:true
    }
]

package.json 配置 // 忽略掉css 按需导入。

"name":"lesson"
"sideEffects":["@babel/polly-fill","*.css"],
"sideEffects":false,

weppack

安装

项目文件环境

本地安装

准备文件

执行命令打开index.html

使用配置文件

配置 scripts

配置模式

图片与文件处理

style.css

index.js

webpack.config.js

babel 与react

压缩

代码分割

sourceMap

按需导入js

Prefetch

环境变量

Entry 与Output的配置

tree shaking

猜你喜欢

热点阅读

weppack

安装

项目文件环境

本地安装

准备文件

执行命令 打开index.html

使用配置文件

配置 scripts

配置模式

图片与文件处理

style.css

index.js

webpack.config.js

babel 与react

压缩

代码分割

sourceMap

按需导入js

Prefetch

环境变量

Entry 与Output的配置

tree shaking

猜你喜欢

热点阅读

执行命令打开index.html