webpack安装及其主要配置

最新推荐文章于 2021-09-28 17:09:18 发布

gercke

最新推荐文章于 2021-09-28 17:09:18 发布

阅读量126

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/gercke/article/details/104186236

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了webpack的安装、配置过程，包括webpack的基本概念、配置入口文件、打包解析、webpack-dev-server的安装与配置，以及解决跨域问题。还涉及HTML模板插件、多页面配置、CSS与JS的加载与压缩、图片资源处理、babel-loader的使用，最后讲解了如何用webpack搭建react项目。

摘要由CSDN通过智能技术生成

webpack配置问题

webpack简介

webpack是一个模块打包器。主要目标是将js文件打包在一起，打包后的文件用于在浏览器中使用。

webpack中文官网：http://www.webpackjs.com/

如果打包的文件中node_modoules删除了，直接用npm install直接下载就可以重新运行

安装

1.进入项目目录生成package.json文件

npm init

2.安装webpack和webpack-cli(脚手架)

npm install --save-dev webpack webpack-cli

3.配置文件

"scripts":{
    //package.json增加下面语句
    "build":"webpack --config webpack.config.js"
}

4.执行

npm run build

webpack配置入口文件

根目录建立webpack.config.js文件

//webpack是node写出来的使用node语言
let path = require("path");
//console.log(path.resolve('dist'));//可以查看dist路径在哪
module.exports={
    entry:'./src/index.js',//入口，自己创建写东西
    output:{
        filename:"bundle.js",//打包后的文件名
        path:path.resolve('dist')//路径必须是绝对路径
    }
}

打包出的解析文件

let path=require("path");
module.exports={
    //模式默认两种production(生产环境，代码压缩) development(开发环境，代码不压缩)
    mode:"development",
    entry:'./src/index.js',//入口,单页面的
    output:{
        filename:"bundle.js",//打包后的文件名
        path:path.resolve('dist')//路径必须是绝对路径
    }
}

webpack-dev-server安装

1.安装webpack-dev-server

npm install --save-dev webpack-dev-server

2.配置文件–package.json

"script":{
    "dev":"webpack-dev-server"
}

3.执行

npm run dev

配置webpack-dev-server(webpack.config.js)

    devServer:{//开启服务器配置
        port:8080,//端口
        host:"localhost",
        progress:true,//开启进度条
        contentBase:"./dist",//默认打开目录
        open:true,//自动打开浏览器
        compress:true//启动gzip压缩
    }

用配置代理解决跨域问题(webpack.config.js)

    //跨域
    proxy:{
        '/api':{
            target:'http://cjl.sds.com/api',//接口
            changeOrigin:true,//是否跨域
            pathRewrite:{
                '^/api':''//需要重写的,相当于用/api代替了http://cjl.sds.com/api
            }
        }
    }

HTML模板插件

使用html模板插件解决启动webpack-dev-server时必须生成build文件
1.安装html-webpack-plugin

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

2.配置HTML模板插件

let HtmlWebpackPlugin = require(“html-webpack-plugin”);

//一个数组存放所有插件
    plugins:[
    //配置这个模板后contentBase:"./build"不生效
        new HtmlWebpackPlugin({
        //关联模板html文件
            template:"./public/index.html",
            filename:"index.html"
            minify:{
            //折叠换行
                collapseWhitespace:true
            },
            //生产环境下生成hash戳
            hash:true
        })
    ]

多页面(MPA)配置

1.多入口

entry:{
    index:"./src/index.js",
    admin:"./src/admin.js"
}

2.输出

output:{
    filename:"[name].js",//多页面用[name]自动获取入口的home和admin
    path:path.resolve("dist"),//路径必须是绝对路径
    publicPath:"/"//dist之后的公共路径,可以新增文件夹/demo/
}

3.配置html模板(webpack.config.js)

    plugins:[
    //配置这个模板后contentBase:"./build"不生效
        new HtmlWebpackPlugin({
        //关联模板html文件
            template:"./public/index.html",
            filename:"index.html",
            chunks:['index']//只引用index.js，解决index.html里面有index.js和admin.js的问题
            )},
        new HtmlWebpackPlugin({
            template:"./public/admin.html",
            filename:"admin.html",
            chunks:['admin'],//只引用admin.js，解决admin.html里面有index.js和admin.js的问题
            minify:{//折叠换行
                collapseWhitespace:true
                },
            //生产环境下生成hash戳
            hash:true
            })
        ]

loader配置加载css样式

1.安装css loader

npm install --save-dev css-loader style-loader mini-css-extract-plugin
css-loader:解析@import这种语法
style-loader：把css插入到head标签中
mini-css-extract-plugin：抽离css样式让index.html里面的css样式变成link引入

2.配置css loader(webpack.config.js)

loader是有顺序的，默认是从右向左，从下向上执行

    //抽离css文件
    let MiniCssExtractPlugin = require("mini-css-extract-plugin");
    plugins:[
        new MiniCssExtractPlugin({
            filename:'static/css/main.css'
        })
    ],
    module:{
        rules:[{
            test:/\.css$/,//正则转义
            use:[
                MiniCssExtractPlugin.loader,//都放到上面的main.css里面
                {
                    loader:"css-loader"
                },
                //处理css兼容性
                {
                    loader:"postcss-loader",
                    options:{
                        plugins:[
                            postCss
                        ]
                    }
                }
            ]
        }]
    },

通过上面的方法可以通过相应的js用import"./dfs/fsd/index.css"将需要的css样式模块化导入。

配置css压缩

1.安装

npm install --save optimize-css-assets-webpack-plugin

2.配置webpack.config.js

//css压缩，在没有dist文件时build
let OptimizeCss = require("optimize-css-assets-webpack-plugin");
module.exports={
        optimization:{//优化项启动后mode模式代码压缩不在生效，必须配置js压缩插件
        minimizer:[
            new OptimizeCss()//优化css
        ]
    }
}

配置js压缩

1.安装

npm install --save uglifyjs-webpack-plugin

2.配置webpack.config.js

let UglifyjsPlugin = require("uglifyjs-webpack-plugin");
//js压缩,在已经有build文件基础上再build可以查看
module.exports = {
    optimization:{
        minimizer:[
          new UglifyjsPlugin({
             cache:true,//是否用缓存
             parallel:true,//是否并发打包
             sourceMap:true//es6映射es5需要用
           })
        ]
    }
}

图片资源文件处理

1.安装

npm install --save-dev url-loader
npm install --save file-loader

2.配置webpack.config.js

module:{
    rules:[{
        test:/\.(png|jpg|gif|jpeg)$/,
        use:{
            loader:"url-loader",//file-loader加载图片，url-loader图片小于多少K用base64显示
            options:{
                limit:100*1024,//小于100k用base64
                outputPath:"static/images"//build之后目录分类
            }
        }
    }]
}

在入口文件index.js中使用：

import logo from './assets/images/1.png';
var image = new Image();//不用let定义，因为uglifyjs不支持es6
// image.src = require("./assets/images/1.png").default;//require不经常使用，用上面的import导入即可
image.src=logo;
document.body.appendChild(image);

babel-loader

1.安装

npm install --save babel-loader @babel/core @babel/preset-env @babel/plugin-proposal-class-properties @babel/runtime @babel/plugin-transform-runtime

@babel/core:babel核心文件

@babel/preset-env：es6转es5

@babel/plugin-proposal-class-properties:支持es6，class Goods类语法

@babel/runtime：编译模块的工具函数

@babel/plugin-transform-runtime：es5转es5时babel需要辅助函数，用transform-runtime将辅助函数放置到单独模块中，减少文件的大小

2.配置webpack.config.js

rules:[
         {
            test:/\.(js|jsx)$/,//支持require('*.js')文件
            use:{
                loader:'babel-loader',
                options:{//用babel-loader 需要把es6-es5
                    presets:[
                        '@babel/preset-env'
                    ],
                    plugins:[
                        '@babel/plugin-proposal-class-properties',
                        '@babel/plugin-transform-runtime'
                    ]
                }
            },
            include:path.resolve(__dirname,'src'),//需要转换的文件夹
            exclude:/node_modules/ //排除转换的文件夹
        }
]

3.使用npm run dev 查看配置结果

用webpack搭建react项目

1.安装

npm i react react-dom --save (安装react模块)

npm i bable-preset-react --save-dev (安装react的解析模块)

npm install babel-loader @next @babel/core @babel/preset-react @babel/runtime --save (安装所需要的babel)

2.配置webpack.config.js

{
    test:/\.js$/,
    use:{
        loader:"babel-loader",
        options:{
            presets:[
                '@babel/preset-env',
                '@babel/preset-react'//在上面的基础上多增加了
            ]，
            plugins:[
                '@babel/plugin-proposal-class-properties',
                '@babel/plugin-transform-runtime'
            ]
        }
    }
}

3.在index.js中写入react代码，执行npm run dev即可

gercke

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack安装及其主要配置

webpack配置问题webpack简介webpack是一个模块打包器。主要目标是将js文件打包在一起，打包后的文件用于在浏览器中使用。webpack中文官网：http://www.webpackjs.com/安装1.进入项目目录生成package.json文件npm init2.安装webpack和webpack-cli(脚手架)npm install --save...
复制链接

扫一扫