webpack的基本使用方法

本文是关于webpack的基础、常用方法，想要了解更多更深层的代码可以查看webpack官网

https://www.webpackjs.com/

下面是自己整理的webpack思维导图可以快速的了解webpack的用法及用途
在这里插入图片描述
构建项目的文件目录

1、使用webpack构建本地服务器

npm install --save-dev webpack-dev-server
加入到webpack的配置文件（webpack.config.js）
 devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true//实时刷新,
    Port:9090//不写默认是8080
  } 
在package.json中的scripts对象中添加如下命令，用以开启本地服务器：
"server": "webpack-dev-server --open"

2、使用Loaders
Loaders是webpack提供的最激动人心的功能之一了。
通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss为css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件。
Loaders需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置
webpack 的配置中 loader 有两个目标：

test 属性一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）
use 属性，表示进行转换时，应该使用哪个 loader。
loader：loader的名称（必须）
3、include/exclude ：手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；

module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }

以上配置信息的意思：
webpack 编译器，当你碰到「在 require()/import 语句中被解析为 ‘.txt’ 的路径」时，在你对它打包之前，先使用 raw-loader 转换一下。”

3、Babel
Babel其实是一个编译JavaScript的平台，它可以编译代码帮你达到以下目的：

让你能使用最新的JavaScript代码（ES6，ES7…），而不用管新标准是否被当前使用的浏览器完全支持；
让你能使用基于JavaScript进行了拓展的语言，比如React的JSX；
Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack可以把其不同的包整合在一起使用，对于每一个你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析Es6的babel-env-preset包和解析JSX的babel-preset-react包）。
// npm一次性安装多个依赖模块，模块之间用空格隔开

npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
// 配置Babel、允许使用ES6以及JSX的语法
module: {
rules: [
{
    test: /(\.jsx|\.js)$/,
    use: {
        loader: "babel-loader",
        options: {
            presets: [
                "env", "react"
            ]
        }
    },
   exclude: /node_modules/
}
]
}
*****babel-loader和babel-core版本要相邻不然会报错*****
babel-loader 8.x对应babel-core 7.x
babel-loader 7.x对应babel-core 6.x

Yan_an_n

发布了11 篇原创文章 · 获赞 0 · 访问量 460

私信关注

webpack的基本使用方法

猜你喜欢