美文网首页
weppack

weppack

作者: 吃肉肉不吃肉肉 | 来源:发表于2020-04-01 23:07 被阅读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

          本文链接：https://www.haomeiwen.com/subject/aigzuhtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|weppack|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！