webpack配置+手动搭建react环境

webpack

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。

一、安装

1、全局安装

npm i webpack -g
npm i webpack-cli -g

查看全局的webpack版本

webpack --version

2、局部安装

在创建好的空文件夹中,先初始化

npm init -y

再开始安装

npm i webpack -D
npm i webpack-cli -D

以上安装成功完成后会出现下面图片所示的文件:
在这里插入图片描述
查看项目内的webpack版本,需在package.json文件中配置:
在这里插入图片描述
启动,查看项目内版本

npm run version

二、默认文件

1、默认入口文件

src/index.js
创建 src文件夹,src下创建webpack打包入口文件 index.js;
在这里插入图片描述

1、默认出口文件

dist/main.js
创建 dist文件夹,dist下创建webpack打包入口文件 main.js;
在这里插入图片描述
创建webpack.config.js文件,并编写配置文件:
在这里插入图片描述
代码如下:

const path = require("path");   // Node 自带的模块 无需安装 
const webpack = require("webpack");
module.exports = {
    entry:["./src/index.js"],  // 入口文件 
    output:{
        path:path.resolve(__dirname,"dist"),  // resolve 正确处理 
        filename:"[name].[hash:8].js",  // [name=main] 哈希加密算法得到 长度为8 随机字符串  不可能重名
        publicPath:"",  // 公共路径  打包设置  相对路径 
    },
    mode: "development",          // webpack模式
}

三、修改package.json配置

在这里插入图片描述
在script中添加如下代码:
注:-w为开启监听,只要修改文件或添加配置,保存后自动打包文件;

    "build": "webpack -w"

执行代码:

    npm run build

就可以将src/index.js文件打包出来,并在dist文件夹中可以看见打包好的文件;但是现在会出现一个问题,每保存一次就会产生一个新的JS文件,如果只需要保留最新打包的文件可以安装如下插件:

    npm i clean-webpack-plugin -D

webpack.config.js配置
在这里插入图片描述
代码如下:

const {CleanWebpackPlugin} = require("clean-webpack-plugin");
module.exports = {
    plugins:[
        new CleanWebpackPlugin(),   // 清理之前的打包文件
    ]
}

四、使用HTML模板及抽离样式

1、HTML模板

使用 html-webpack-plugin 插件,webpack 会根据你的配置生成你想要的文件 html,首先安装插件:

npm i html-webpack-plugin -D

然后在webpack.config.js文件中配置:
在这里插入图片描述
代码如下:

const htmlWebpackPlugin = require("html-webpack-plugin"); //  打包处理html;
module.exports = {
    plugins:[       
   		new htmlWebpackPlugin({
        	template:"./public/index.html",  // 打包形成的HTML文件,以./public/index.html为模板,自动引入打包的JS
        	inject:true,   // inject 注入  自动引入打包好的 所有(css/js)文件 
        }),
    ]
}

重新启动后,dist文件夹中会出现一个html文件:
在这里插入图片描述

2、抽离样式

安装插件:

npm i extract-text-webpack-plugin -D

webpack.config.js文件中配置:
在这里插入图片描述
代码如下:

const extractTextWebpackPlugin = require("extract-text-webpack-plugin");   // 抽离样式
module.exports = {
    module:{  // 模块打包规则定义
        rules:[  // 匹配规则
            {   //抽离样式
                test:/\.(css|scss|sass)$/,
                use:extractTextWebpackPlugin.extract({
                    fallback:"style-loader", // 把样式代码转为js字符串的样式代码
                    use:[
                        "css-loader", // 转为 commonJs规范的模块 
                        {
                            loader:"postcss-loader", // 处理css代码 
                            options:{
                                plugins:function(){
                                    return [
                                        require("cssgrace"), // 代码美化 换行 
                                        require("autoprefixer"), // 自动补全  moz ms webkit
                                        require("postcss-px2rem-exclude")(
                                            {
                                                remUnit:37.5,
                                                exclude:/antd/gi,
                                            }
                                        )
                                    ]
                                }
                            }
                        },
                        "sass-loader"  // 编译 sass 为 css 代码
                    ]
                })
            },
            {
                test:/\.(css|less)$/,
                use:extractTextWebpackPlugin.extract({
                    fallback:"style-loader", // 把样式代码转为js字符串的样式代码
                    use:[
                        "css-loader", // 转为 commonJs规范的模块 
                        {
                            loader:"postcss-loader", // 处理css代码 
                            options:{
                                plugins:function(){
                                    return [
                                        require("cssgrace"), // 代码美化 换行 
                                        require("autoprefixer"), // 自动补全  moz ms webkit
                                        require("postcss-px2rem-exclude")(
                                            {
                                                remUnit:37.5,
                                                exclude:/antd/gi,
                                            }
                                        )
                                    ]
                                }
                            }
                        },
                        "less-loader"
                    ]
                })
            }
        ]
    },
}

3、图片打包

安装插件:

npm i url-loader file-loader -D

webpack.config.js文件中配置:
在这里插入图片描述
代码如下:

module:{  // 模块打包规则定义
        rules:[  // 匹配规则
            {   //打包图片 
                test:/\.(png|jpg|gif|svg|woff|woff2|eot|ttf)$/,
                use:{
                    loader:"url-loader",
                    options:{
                        limit:8192, // 图片最大 8M
                        name:"imgs/[name].[hash:8].[ext]"  //ext 后缀名 
                    }
                }
            }
         ]
}

五、开发服务器

安装插件:

npm i webpack-dev-server -D

webpack.config.js文件中配置:
在这里插入图片描述
代码如下:

const path = require("path");   // Node 自带的模块 无需安装 
const webpack = require("webpack");
module.exports = {
    devServer:{  // 开发环境的服务器配置  设置代理 
        compress:true,
        hot:true,
        inline:true,
        port:7000,   // 端口
        open:true,   // 自动打开浏览器 
        publicPath:"",
        proxy:{    // 代理配置
            "/yun":{
                target:"http://47.104.209.44:3333/",  // 服务器地址  
                changeOrigin: true,
                pathRewrite:{
                    "^/yun":""  // 需要将 /yun 重写为 / 
                }
            },
        }
    },
}

package.json文件配置,以便启动服务器:
在这里插入图片描述
启动服务器,执行:

npm run server

六、引入 babel-loader 来编译 es6以及react

1、babel-loader插件

安装插件:

npm i @babel/core babel-loader @babel/preset-env -D 

webpack.config.js文件中配置:
在这里插入图片描述
代码如下:

const path = require("path");   // Node 自带的模块 无需安装 
const webpack = require("webpack");
module.exports = {
    module:{  // 模块打包规则定义
        rules:[  // 匹配规则
            {   //配置babel  babel-loader @babel/core @babel/preset-env
                test: /\.js$/,
                exclude: /(node_modules)/,  //排除node_modules
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env']
                  }
                }
            }
        ]
}

2、react插件

安装插件:

npm i react react-dom @babel/preset-react -D 

webpack.config.js文件中配置:
在这里插入图片描述
代码如下:

const path = require("path");   // Node 自带的模块 无需安装 
const webpack = require("webpack");
module.exports = {
    module:{  // 模块打包规则定义
        rules:[  // 匹配规则
            {   //配置babel  babel-loader @babel/core @babel/preset-env
                //配置react  react react-dom @babel/preset-react
                test: /\.js$/,
                exclude: /(node_modules)/,  //排除node_modules
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env','@babel/preset-react']
                  }
                }
            }
        ]
}

七、webpack.config.js配置文件完整代码

const path = require("path");   // Node 自带的模块 无需安装 
const webpack = require("webpack");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
const htmlWebpackPlugin = require("html-webpack-plugin");  // 打包处理html;
const extractTextWebpackPlugin = require("extract-text-webpack-plugin");   // 抽离样式

module.exports = {
    entry:["./src/index.js"],  // 入口文件 
    output:{
        path:path.resolve(__dirname,"dist"),  // resolve 正确处理 
        filename:"[name].[hash:8].js",  // [name=main] 哈希加密算法得到 长度为8 随机字符串  不可能重名
        publicPath:"",  // 公共路径  打包设置  相对路径 
    },
    mode: "development",          // webpack模式
    plugins:[
        new CleanWebpackPlugin(),   // 清理之前的打包文件
        new htmlWebpackPlugin({
            template:"./public/index.html",  // 打包形成的HTML文件,以./public/index.html为模板,自动引入打包的JS
            inject:true,   // inject 注入  自动引入打包好的 所有(css/js)文件 
        }),
    ],
    module:{  // 模块打包规则定义
        rules:[  // 匹配规则
            {   //打包图片 
                test:/\.(png|jpg|gif|svg|woff|woff2|eot|ttf)$/,
                use:{
                    loader:"url-loader",
                    options:{
                        limit:8192, // 图片最大 8M
                        name:"imgs/[name].[hash:8].[ext]"  //ext 后缀名 
                    }
                }
            },
            {   //抽离样式
                test:/\.(css|scss|sass)$/,
                use:extractTextWebpackPlugin.extract({
                    fallback:"style-loader", // 把样式代码转为js字符串的样式代码
                    use:[
                        "css-loader", // 转为 commonJs规范的模块 
                        {
                            loader:"postcss-loader", // 处理css代码 
                            options:{
                                plugins:function(){
                                    return [
                                        require("cssgrace"), // 代码美化 换行 
                                        require("autoprefixer"), // 自动补全  moz ms webkit
                                        require("postcss-px2rem-exclude")(
                                            {
                                                remUnit:37.5,
                                                exclude:/antd/gi,
                                            }
                                        )
                                    ]
                                }
                            }
                        },
                        "sass-loader"  // 编译 sass 为 css 代码
                    ]
                })
            },
            {
                test:/\.(css|less)$/,
                use:extractTextWebpackPlugin.extract({
                    fallback:"style-loader", // 把样式代码转为js字符串的样式代码
                    use:[
                        "css-loader", // 转为 commonJs规范的模块 
                        {
                            loader:"postcss-loader", // 处理css代码 
                            options:{
                                plugins:function(){
                                    return [
                                        require("cssgrace"), // 代码美化 换行 
                                        require("autoprefixer"), // 自动补全  moz ms webkit
                                        require("postcss-px2rem-exclude")(
                                            {
                                                remUnit:37.5,
                                                exclude:/antd/gi,
                                            }
                                        )
                                    ]
                                }
                            }
                        },
                        "less-loader"
                    ]
                })
            },
            {   //配置babel  babel-loader @babel/core @babel/preset-env
                //配置react  react react-dom @babel/preset-react
                test: /\.js$/,
                exclude: /(node_modules)/,  //排除node_modules
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env','@babel/preset-react']
                  }
                }
              }
        ]
    },
    devServer:{  // 开发环境的服务器配置  设置代理 
        compress:true,
        hot:true,
        inline:true,
        port:7000,   // 端口
        open:true,   // 自动打开浏览器 
        publicPath:"",
        proxy:{    // 代理配置
            "/yun":{
                target:"http://47.104.209.44:3333/",  // 服务器地址  
                changeOrigin: true,
                pathRewrite:{
                    "^/yun":""  // 需要将 /yun 重写为 / 
                }
            },
        }
    },
}
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试
应支付0元
点击重新获取
扫码支付

支付成功即可阅读