webpack

最新推荐文章于 2023-07-08 13:36:47 发布

The truth that you leave.

最新推荐文章于 2023-07-08 13:36:47 发布

阅读量109

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/h_zxc123/article/details/107491225

版权

webpack 安装

安装nodejs…
创建目录，npm init 初始化项目
安装webpack

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

新建文件
– dist 文件生成目录
---- index.html

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

配置文件

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',
    }
}

配置 scripts (package.js)

npm run start

"scripts":{
    start:  "webpack"
}

配置模式

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

插件

处理html

html-webpack-plugin

npm install html-webpack-plugin --save-dev

 
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports={   
    mode:'production',
    entry:'./src/index.js',
    output:{
        filename:'main.js',
        path:__dirname+'/dist'
    },
    plugins:[
        new htmlWebpackPlugin({
            template:'./src/index.html'
        })
    ]
}

目录
src
header.js
index.html
index.js
package.js
webpack.config.js
filename: ‘index.html’ 默认情况下生成的 html 文件叫 index.html，但有时候你不想叫这个名字，可以改。
filename:‘youIndex.html’
minify压缩去空格

minify: {
  collapseWhitespace: true,
},

处理css

css-loader 分析css关系-合并一个css（import）
style-loader 把css挂载到head里面
mini-css-extract-plugin 把css抽取到单独文件
optimize-css-assets-webpack-plugin用于压缩css文件，它将在webpack构建期间搜索css资源，并将优化/最小化css
less less-loader 处理less文件

npm install css-loader style-loader mini-css-extract-plugin  optimize-css-assets-webpack-plugin -D

index.js

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

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports={ 
    optimization: {
        minimizer: [ new OptimizeCSSAssetsPlugin({})],
      },  
    mode:'production',
    entry:'./src/index.js',
    output:{
        filename:'main.js',
        path:__dirname+'/dist'
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[MiniCssExtractPlugin.loader,/* 'style-loader', */'css-loader']
            },
            {
                test:/\.less$/,
                use:[MiniCssExtractPlugin.loader,/* 'style-loader', */'css-loader','less-loader']
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
        new MiniCssExtractPlugin({
            filename: 'style.css',
            
          }),
    ]
}

服务器 webpack-dev-server

webpack-dev-server 本地服务
clean-webpack-plugin 清理dist目录

安装

 npm install   clean-webpack-plugin webpack-dev-server  -D

webapck.config.js添加如下设置

module.exports = {
    devServer: {
        host: 'localhost', //主机地址，默认是localhost
        port: '8080', //端口号，默认8080
        open: true, //自动打开页面
        hot:true,//热更新
    },
};

package.json中添加开发环境启动指令

{
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --mode development"
  }
}

前端跨域代理

前端通过代理处理跨域问题，只适用开发环境。对于需要代理的接口，我们将接口服务器替换成devServer，由devServer来帮助我们完成代理请求。所以在项目源代码中，我们需要自行根据开发环境以及接口是否需要代理，来判断该接口请求的服务器地址是否需要换成devServer的地址。

webpack.config.js添加如下配置

module.exports = {
    devServer: {
        proxy: {
            //哪些访问需要代理转发
            '/api': {
                target: 'http://47.110.129.207',//目标服务器
                changeOrigin: true, 
                secure: false,  
                credentials: 'include', 
                pathRewrite: {
                    '^/api': '' //重写路径，不需要重写则为‘’
                }
            }
        }
    }
}

图片与文件处理

file-loader可以解析项目中的url引入（不仅限于css）使之指向正确的文件
url-loader 会将小图片生成base64编码格式(url-loader封装了file-loader)
image-webpack-loader 插件可将大的图片进行压缩从而缩小打包体积
html-loader html 代码里处理 img 标签的 loader。
@import ‘…/assets/font/iconfont.css’;

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

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]'},esModule: false},'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',
            
          }),
    ]
}

设置目录别名

module.exports = {
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './src'), //设置@为src目录的别名
        }
    },
};

public公共静态资源目录拷贝

npm install --save-dev copy-webpack-plugin

webpack.config.js添加如下配置

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    plugins: [
        new CopyWebpackPlugin([{
            from: __dirname + '/public',
            to: __dirname + '/dist/public',
            ignore: ['.*']
        }])
    ],
};

压缩

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

uglifyjs-webpack-plugin js压缩

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

安装 cnpm install @babel/plugin-syntax-dynamic-import -D
配置 babelrc plugins

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

Prefetch

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

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

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

环境变量

scripts:{
    "dev":"webpack-dev-server --config wepack.dev.js",
    "build":"webpack --config webpack.prod.js"
   //"build": "webpack --mode production --env.production",
}

const merge = require("webpack-merge")
const devconfig = {}
const commonConfig = require("./webpack.com.js");
 

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

Entry 与Output的配置

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,

vue 环境配置

安装依赖

npm install --save vue
npm install --save-dev vue-loader
npm install --save-dev vue-style-loader
npm install --save-dev vue-template-compiler
npm install --save-dev vue-hot-reload-api


npm install --save-dev @babel
npm install --save-dev babel-loader@7
npm install --save-dev @babel/core
npm install --save-dev @babel/preset-env

npm install --save @babel/polyfill

webpack.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    entry: './src/main.js',
    output: {
        filename: 'js/[name]-[hash].js',//打包出的脚本文件全部放进dist下的js目录
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',//使用绝对路径
    },
    module: {
        rules: [{ //vue 解析
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                loaders: { //开发环境使用style-loader打包
                    css: [process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader'],
                    scss: [process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader, 'sass-loader']
                }
            }
        }, { //js 解析
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
        }, {
            test: /\.css$/,
            //开发环境使用style-loader打包
            use: [process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader']
        }, {
            test: /\.scss$/,
            //开发环境使用style-loader打包
            use: [process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader', 'sass-loader']
        }, {
            test: /\.(png|jpg|gif)$/,
            use: [{
                loader: 'file-loader',
                options: {
                     name: 'images/[name]-[hash].[ext]',//所有图片放进images目录
}
            }]
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'myWebpack',
            filename: 'index.html',
            template: './public/index.html'
        }),
        new MiniCssExtractPlugin({
            filename: "[name]-[hash].css",//所有抽离出的样式文件，放进css目录
            chunkFilename: "vue-[name]-[hash].css"
        }),
        new VueLoaderPlugin()
    ],
};

配置babel
在项目根目录，创建 .babelrc 文件，内容如下：

{
 "presets": ["@babel/preset-env","@babel/preset-react"],
 
}
``
`
编写 App.vue 文件
在根目录下的src目录中，新建一个 App.vue

在main.js中引用 App.vue 组件

```javascript
// 引入 Vue 框架
import Vue from 'vue'

//引入 App.vue 组件
import App from './App.vue'

new Vue({
    el: '#app',
    render: h => h(App)
})

The truth that you leave.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack

webpack 安装安装nodejs…创建目录，npm init 初始化项目安装webpacknpm install --save-dev webpacknpm install --save-dev webpack-cli新建文件– dist 文件生成目录---- index.html– index.js 主入口文件– header.js 需要被index引入的文件配置文件const path = require('path')// 引入node的 path路径模块m
复制链接

扫一扫