webpack学习笔记——webpack和babel的基本使用

最新推荐文章于 2024-03-05 14:20:26 发布

越学越快乐的Ivy

最新推荐文章于 2024-03-05 14:20:26 发布

阅读量338

点赞数

文章标签： web开发 javascript

本文链接：https://blog.csdn.net/qq_41998614/article/details/108236521

版权

以下操作前提：已安装node

webpack学习笔记——webpack和babel的基本使用

安装及配置webpack
让打包的js文件在网页中开启
- 安装插件
- 初始化配置文件 webpack.config.js
使用babel
模块化
设置webpack生产环境

安装及配置webpack

初始化 node 环境

在cmd中目标文件夹 webpack-study 路径下输入

npm init -y

初始化 npm 环境，然后就可以看到在目标文件夹 webpack-study 中创建了文件 package.json 如下代码：

D:\prepare\code-master\code\webpack-study>npm init -y
Wrote to D:\prepare\code-master\code\webpack-study\package.json:

{
  "name": "webpack-study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

安装webpack

输入：

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

分别安装webpack和webpack-cli，4以上的webpack版本都要安装cli，然后可以看到文件夹中多了个 node_module文件夹。
在这里插入图片描述

在目标文件夹webpack-study下新建一个src文件夹；
然后在src文件夹下新建index.js，并且随意在里面写点什么，比如：

//index.js
console.log('this is index.js');

初始化webpack配置文件

在目标文件夹 webpack-study 中新建文件 webpack.config.js，可以看到现在文件目录结构是这样：
在这里插入图片描述

然后设置 webpack.config.js 中的配置：

path——导入path模块；
mode——设置开发模式；
entry——设置index.js为入口文件，__dirname是当前目录，通过join连起来就是index.js的路径；
outhput——设置出口。

//webpack.config.js
const path = require('path')
module.exports = {
  mode: 'development', //开发模式，线上模式是production
  entry: path.join(__dirname, 'src', 'index.js'), //__dirname前面是两个下划线
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')//现在还没有这个dist文件夹,系统输出时会自己创建
  }

}

设置打包时使用的配置文件

然后在webpack.json 中添加build配置，在 scripts 里添加 “build”: “webpack”，如下面的代码：

{
  "name": "webpack-study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack-cli": "^3.3.12"
  }
}

webpack打包

运行 npm run build

运行结果如图：
在这里插入图片描述

目标文件夹中会有dist文件夹，dist文件里是bundle.js，这都是之前在webpack.config.js里设置的。

让打包的js文件在网页中开启

现在想让bundle.js在网页中开启出来
在src文件夹中新建一个index.html，代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>webpack演示</title>
</head>

<body>
  <p>webpack study</p>
</body>

</html>

安装插件

运行：

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

安装两个插件，第二个是可以启动服务器的插件，安装完成后记得去package.json中查看有没有两个插件的版本号，有就是成功了，如下图这样：
在这里插入图片描述

初始化配置文件 webpack.config.js

导入插件’html-webpack-plugin’；
plugins 插件配置，设置输入和输出；
设置服务器，端口等

//webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development', //开发模式，线上模式是production
  entry: path.join(__dirname, 'src', 'index.js'), //__dirname前面是两个下划线
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')//现在还没有这个dist文件夹,系统输出时会自己创建
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'src', 'index.html'),//模板
      filename: 'index.html'//根据上一行的模板产出的html,不是原来的index.html
    })
  ],
  devServer: {
    port: 3000,
    contentBase: path.join(__dirname, 'dist')//当前目录
  }

}

在webpack.json中设置服务器启动，在scripts里添加

“dev”:“webpack-dev-server”

{
  "name": "webpack-study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev":"webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^4.3.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

然后在cmd中输入

npm run dev

启动服务器，如下图就是成功了
在这里插入图片描述
我们刚才设置的端口是3000，输出的文件名是index.html，可以在浏览器中试一下，

http://localhost:3000/index.html

在这里插入图片描述

耶。成功，✿✿ヽ(°▽°)ノ✿

使用babel

写ES6代码

在index.js中用ES6语法写代码

//index.js
const sum = (a, b) => {
  return a + blur;
};
const res = sum(10, 20);
console.log(res);

安装babel

装babel的三个插件

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

配置 .babelrc

在目标文件夹新建 .babelrc 文件，并添加配置

在这里插入图片描述

//.babelrc
{
  "presets": [
    "@babel/preset-env"
  ]
}

模块化

在webpack.config.js 中设置模块化 module 部分，设置以.js结尾的文件处理规则。

//webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development', //开发模式，线上模式是production
  entry: path.join(__dirname, 'src', 'index.js'), //__dirname前面是两个下划线
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')//现在还没有这个dist文件夹,系统输出时会自己创建
  },
  module: {
    rules: [
      {
        test: /\.js$/,//以.js结尾的都以这个规则执行
        loader: ['babel-loader'], //用的插件
        include: path.join(__dirname, 'src'),//文件路径
        exclude: /node_modules/  //除了这个路径下的
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'src', 'index.html'),//模板
      filename: 'index.html'//根据上一行的模板产出的html,不是原来的index.html
    })
  ],
  devServer: {
    port: 3000,
    contentBase: path.join(__dirname, 'dist')//当前目录
  }

}

cmd目标文件夹下运行

npm run dev

然后在浏览器中 http://localhost:3000/bundle.js 查看，在最下面可以看到之前用ES6 写的函数已经变成ES5的形式。
在这里插入图片描述

模块化

单个导出：
现在src目录下新建一个a.js，并导出一些函数，变量

//a.js
export function fn () {
  console.log('fn');
}
export const name = 'b';
export const obj = {
  name: 'zhangsan'
}

导出后，现在需要导入模块，在 src/index.js 中导入刚才导出的函数和变量，并且使用。

//index.js
import { fn, name, obj } from './a';//解构赋值
fn();
console.log("name", name);
console.log("obj", obj);

一起导出

//b.js
function fn () {
  console.log('fn');
}
const name = 'b';
const obj = {
  name: 'zhangsan'
}
//ES6的写法，key和value一样可以简写
export {
  fn,
  name,
  obj
}
//ES5的写法
// export {
//   fn: fn,
//   name: name,
//   obj: obj
// }

导入使用

//index.js
// import { fn, name, obj } from './a';//模块导入
import { fn, name, obj } from './b';//模块导入
fn();
console.log("name", name);
console.log("obj", obj);

用default来做，default是只导入一个

//c.js
const xxx = {
  name: 'xxx'
}

export default {
  xxx
}

//index.js
import xxx from './c';
console.log(xxx);

设置webpack生产环境

新建webpack.prod.js，生产环境是用来放线上的，把配置里mode改为production，并且devserver就不用了，因为是放线上的，

//webpack.prod.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'production', //生产环境，线上模式
  entry: path.join(__dirname, 'src', 'index.js'), //__dirname前面是两个下划线
  output: {
    filename: 'bundle.[contenthash].js',//生成hash码
    path: path.join(__dirname, 'dist')//现在还没有这个dist文件夹,系统输出时会自己创建
  },
  module: {
    rules: [
      {
        test: /\.js$/,//以.js结尾的都以这个规则执行
        loader: ['babel-loader'], //用的插件
        include: path.join(__dirname, 'src'),//文件路径
        exclude: /node_modules/  //除了这个路径下的
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'src', 'index.html'),//模板
      filename: 'index.html'//根据上一行的模板产出的html,不是原来的index.html
    })
  ]

}

修改package.json，把build的配置文件改为webpack.prod.js

{
  "name": "webpack-study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.prod.js",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.11.4",
    "@babel/preset-env": "^7.11.0",
    "babel-loader": "^8.1.0",
    "html-webpack-plugin": "^4.3.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

运行

npm run build

越学越快乐的Ivy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack学习笔记——webpack和babel的基本使用

前提：已安装nodewebpack初始化在cmd中目标文件夹路径下输入 npm init -y 初始化 npm 环境，如下代码：D:\prepare\code-master\code\webpack>npm init -yWrote to D:\prepare\code-master\code\webpack\package.json:{ "name": "webpack", "version": "1.0.0", "description": "", "main": "in
复制链接

扫一扫