React学习笔记—webpack配置

一、webpack介绍

webpack

1、由来

由于前端之前js、css、图片文件需要单独进行压缩和打包,这样团队人员处理很繁琐,然后 Instagram 团队就想让这些工作自动化,然后webpack应运而生。

2、介绍

webpack是一个模块打包器(module bundler),webpack视HTML,JS,CSS,图片等文件都是一种 资源 ,每个资源文件都是一个模块(module)文件,webpack就是根据每个模块文件之间的依赖关系将所有的模块打包(bundle)起来。

3、作用

对 CommonJS 、 AMD 、ES6的语法做了兼容
对js、css、图片等资源文件都支持打包(适合团队化开发)
比方你写一个js文件,另外一个人也写一个js文件,需要合并很麻烦,现在交给webpack合并很简单
有独立的配置文件webpack.config.js
可以将代码切割成不同的chunk,实现按需加载,降低了初始化时间
具有强大的Plugin(插件)接口,大多是内部插件,使用起来比较灵活


二、webpack的配置与使用

1、使用npm init初始化项目

npm init ==> 产生 package.json 文件

2、安装webpack

npm install webpack webpack-cli –save-dev
yarn add webpack webpack-cli –save-dev


3、webpack的运行

package.json 中配置可执行的脚本

"scripts":{
    "serve": "webpack --mode development --watch",
    "build": "webpack --mode production" 
    ...
}

serve 命令后面加上 –watch 表示热更新(文件保存之后浏览器会实时更新)


4、webpack配置入口与出口及单页面与多页面

默认的入口文件是 src/index.js
默认的出口文件是 dist/main.js
自定义需要在根目录下新建 webpack.config.js 文件:

// 在这个文件中设置我们自定义的打包规则
// 所有的规则都写在module.exports={}中
let path = require('path') //引入path模块

module.exports = {
    // 配置压缩生成的环境 production(生产) development(开发)
    mode: 'production',

    // entry设置入口文件(可以设置多个入口)
    entry: {
        index: __dirname + "/src/index.js",
        index2: __dirname + "/src/index1.js"
    },

    // output设置出口文件,
    output: {
        // 输出的文件名
        filename: "[name].min.js",
        // 输出目录必须是绝对路径
        // path: path.resolve(__dirname, 'dist')
        path: __dirname + "/dist", // 打包后的文件存放的地方

        // 虚拟的路径可以访问到 我们生成的文件
        // 因为在开发环境中不会生成dist目录,只会存在内存当中
        publicPath:"/dist/" 
    }
}

5、webpack-dev-server(webpack服务器)

安装 webpack-dev-server :

npm install webpack-dev-sever –save-dev
yarn add webpack-dev-sever –save-dev

webpack.config.js 文件下配置如下内容:

module.exports = {
    devServer: {
        // 配置服务器的端口号
        port: 3000,
        // 显示每次打包编译的进度
        progress: true,
        // 指定访问的根目录
        contentBase: './',
        // 配置自动打开浏览器
        open: true,
        // 实时刷新
        inline: true,
        // 配置反向代理
        proxy: {
        }
    }
}

// 服务器打开并不会生成dist文件夹,但是会生成在内存当中

配置完成之后需要修改 package.json 文件:

"scripts":{
    "serve": "webpack --mode development --watch",
    "build": "webpack --mode production" ,
    "start": "webpack-dev-server --mode development",
    ...
}

配置完成之后使用如下命令启动服务器:

npm start
yarn start

6、source-map 映射源代码

webpack.config.js 文件下配置如下内容:

devtool: 'source‐map'

配置之后打包项目会生成一个 xxx.map 文件,可以方便找出代码的 bug(方便调试)


7、loaders的配置

css-loader && style-loader (将 css 文件当成模块处理) :

// npm install css-loader style-loader --save-dev
// yarn add css-loader style-loader --save-dev

module.exports = {
    module: {
        rules: [{
            test: /\.css$/,
            loader: 'style-loader!css-loader' //添加对样式表的处理,内联样式
        }],
    }
}

sass-loader && node-sass (将 scss 编译生成 css 文件):

// cnpm install sass-loader node-sass --save-dev

module.exports = {
    module: {
        rules: [{
            test: /\.css$/,
            loader: 'style-loader!css-loader!sass-loader' //添加对样式表的处理,内联样式
        }],
    }
}

post-css ** (处理 **css 兼容性问题) (postcss-loader autoprefixer postcss):

// cnpm install postcss-loader autoprefixer postcss --save-dev

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader!postcss-loader'
            },
            {
                test: /\.scss$/,
                loader: 'style-loader!css-loader!postcss-loader!sass-loader'
            }
        ],
    } 
}

需要配置兼容哪些浏览器的话,在根目录文件夹下新建 postcss.config.js 文件配置如下内容:

module.exports = {
    plugins: [
        // require('autoprefixer')('last 100 versions' )
        require('autoprefixer')(
            { browsers: 
                [
                    'last 10 Chrome versions',
                     'last 5 Firefox versions', 
                     'Safari >= 6', 
                     'ie> 8',
                     'iOS >= 8',
                     'Android >= 4.4'
                 ] 
             }
        )
    ]
}

babel-loader ( ES6语法 => ES5语法 ) *(babel-loader@7 babel-core babel-presetes2015) *:

// cnpm install babel-loader@7 babel-core babel-presetes2015 --save-dev

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/, //随便起的test 名字
                exclude: /node_modules/, //排除一个
                // exclude: /(node_modules|src)/, //*****排除多个怎么写???
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                }
            },
        ],
    } 
}

file-loader && url-loader (public 文件夹 copy 到目标文件夹)

  • url-loader 可以设置图片大小限制,当图片超过限制时,其表现行为等同于 file-loader,而当图片不超过限制时,则会将图片以 base64 的形式打包进 css 文件,以减少请求次数。
// cnpm install file-loader url-loader --save-dev

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/, //随便起的test 名字
                exclude: /node_modules/, //排除一个
                // exclude: /(node_modules|src)/, //*****排除多个怎么写???
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                }
            },
        ],
    } 
}

vue-loader ** ==> 解析vue文件 **(vue-loader vue-template-compiler)

// cnpm install vue-loader vue-template-compiler --save-dev

const  {VueLoaderPlugin} = require("vue-loader")
module.exports = {
    module: {
        rules: [
            { test: /\.vue$/, use: 'vue-loader' } // 处理 .vue 文件的 loader
        ],
    },
    // 插件
    plugins: [
        new VueLoaderPlugin()
    ],
}

转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 848130454@qq.com

文章标题:React学习笔记—webpack配置

文章字数:1.5k

本文作者:Spicy boy

发布时间:2020-03-15, 23:42:38

最后更新:2021-03-08, 17:37:36

原始链接:http://www.spicyboy.cn/2020/03/15/React%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E2%80%94webpack%E9%85%8D%E7%BD%AE/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏