使用webpack打包你的项目

安装Node.js

目前Node.js的最新版本是7.6.x。首先,从Node.js官网下载对应平台的安装程序,网速慢的童鞋请移步国内镜像

在Windows上安装时务必选择全部组件,包括勾选Add to Path

安装完成后,在Windows环境下,请打开命令提示符,然后输入node -v,如果安装正常,你应该看到v7.6.0这样的输出。

继续在命令提示符输入node,此刻你将进入Node.js的交互环境。在交互环境下,你可以输入任意JavaScript语句,例如100+200,回车后将得到输出结果。

要退出Node.js环境,连按两次Ctrl+C。

由于新版的nodejs(大于v7.6.0)已经集成了npm,所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。

使用webpack打包项目的过程

1.安装好npm,这个不再复述,然后在一个目录下执行 npm init,这样就会初始化一个项目包,里面就有了一个package.json的文件,这个文件想必大家都有所了解

2.然后安装一下webpack,既然我们想打包,就要把webpack这个工具安装好,安装方式有两种,一个是全局安装一个是安装在项目中,在项目的package.json目录下执行的命令分别是npm install -g webpack 和 npm install --save-dev webpack,在这里我们安装在项目里面,使用第二种安装方式

3.安装完成之后我们能看到项目目录下有一个node_module的文件夹,然后我们就可以写自己的项目了,我们首先建立一个app和build的文件夹,在app中新建两个文件,分别是test.js和main.js,在pulic中新建一个index.html文件,这样我们的基本项目雏形就产生了

下面我们新建一个项目来详细描述一下使用webpack打包项目的过程:

1.安装好npm,这个不再复述,然后在一个目录下执行 npm init,这样就会初始化一个项目包,里面就有了一个package.json的文件,这个文件想必大家都有所了解

2.然后安装一下webpack,既然我们想打包,就要把webpack这个工具安装好,安装方式有两种,一个是全局安装一个是安装在项目中,在项目的package.json目录下执行的命令分别是npm install -g webpack 和 npm install --save-dev webpack,在这里我们安装在项目里面,使用第二种安装方式

3.安装完成之后我们能看到项目目录下有一个node_module的文件夹,然后我们就可以写自己的项目了,我们首先建立一个app和build的文件夹,在app中新建两个文件,分别是test.js和main.js,在pulic中新建一个index.html文件,这样我们的基本项目雏形就产生了

4.我们在index.html中写入一下片段:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack Project</title>
  </head>
  <body>
    <div id='root'>
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

5.我们在test.js中写入这样一个除了方法:

//test.js

module.exports = function() {
  var test= document.createElement('div');
  test.textContent = "Hi there and testing!";
  return test;
};

6.我们在main.js中把test.js的方法导入进来:

//main.js 
var test= require('./test.js');
document.getElementById('root').appendChild(test());

7、创建webpack.config.

webpack.config.js是webpack的配置文

在项目的根目录下新建一个webpack.config.js的文件,代码如下:

//__dirname是node.js中的一个全局变量,它指向当前执行脚本所在的目录
module.exports = {//注意这里是exports不是export entry: __dirname + "/app/main.js",//唯一入口文件,就像Java中的main方法 output: {//输出目录 path: __dirname + "/build",//打包后的js文件存放的地方 filename: "bundle.js"//打包后的js文件名 } };
7.下面我们就可以使用webpack工具进行打包了

,在项目的根目录,也就是包含node_module的目录下执行下面这个命令node_modules/.bin/webpack app/main.js build/bundle.js,这条命令的是使用webpack把打包后的文件命名为bundle.js放在public文件夹下,其中app/main,js是项目的入口。我们能看到终端上会打印出包含这样的log

(由于node_modules无效,采取如下方式:先全局安装webpack(命令:npm install -g webpack),然后再在项目内安装(命令:npm install webpack --save-dev),这样在项目内就可以直接使用webpack命令了,运行的却是局部的webpack。 webpack 4X 后需要安装webpack-cli ,请注意需要安装在同一目录(命令:npm install --save-dev webpack-cli -g)。安装完成后直接运行webpack命令即可打包成功)

 

执行类似于node_modules/.bin/webpack这样的命令其实是比较烦人且容易出错的,不过值得庆幸的是npm可以引导任务执行,对其进行配置后可以使用简单的npm start命令来代替这些繁琐的命令。在package.json中对npm的脚本部分进行相关设置即可,设置方法如下。

{
"name": "webpackdemo2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.16.5"
}
}

注:package.json中的脚本部分已经默认在命令前添加了node_modules/.bin
路径,所以无论是全局还是局部安装的Webpack,你都不需要写前面那指明详细的路径了。

npm的start是一个特殊的脚本名称,它的特殊性表现在,在命令行中使用npm start就可以执行相关命令,如果对应的此脚本名称不是start,想要在命令行中运行时,需要这样用npm run {script name}npm run build,以下是执行npm start后命令行的输出显示:

 
以后直接输入 npm start就可以进行打包操作了
 

安装React

在终端输入npm install --save-dev react react-dom同时安装React和React-DOM

 标准的React组件后缀名为.jsx,而.jsx是默认不被浏览器所支持的;所以需要一个转换器,将不被浏览器识别的.jsx文件转换成浏览器能够正常运行的文件,这个转换器就是Babel
 

安装和配置Babel

Babel其实是几个模块化的包,其核心功能位于称为babel-core的npm包中,不过webpack把它们整合在一起使用,但是对于每一个你需要的功能或拓展,你都需要安装单独的包(用得最多的是解析Es6的babel-preset-es2015包和解析JSX的babel-preset-react包)。

用npm一次性安装这些依赖包npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

Babel其实可以完全在webpack.config.js中进行配置

但是考虑到babel具有非常多的配置选项,在单一的webpack.config.js文件中进行配置往往使得这个文件显得太复杂,因此一些开发者支持把babel的配置选项放在一个单独的名为 ".babelrc" 的配置文件中。

我们现在的babel的配置并不算复杂,不过之后我们会再加一些东西,因此现在我们就提取出相关部分,分两个配置文件进行配置(webpack会自动调用.babelrc里的babel配置选项),如下:

在webpack.config.js中
module: {
//loaders加载器
rules: [
{
test: /\.(js|jsx)$/,//一个匹配loaders所处理的文件的拓展名的正则表达式,这里用来匹配js和jsx文件(必须)
exclude: /node_modules/,//屏蔽不需要处理的文件(文件夹)(可选)
loader: 'babel-loader'//loader的名称(必须)
}
]
}

在项目根目录下新建.babelrc文件(将文件命名为.babelrc.),没错你没看错,就是只有后缀名的文件,添加如下代码:

//.babelrc

{
  "presets": [
    "react", "es2015" ] } 

这时已将babel配置完成,可以使用JSX和ES6的语法了。


参考:
https://blog.csdn.net/u012631731/article/details/73716951/
https://www.jianshu.com/p/4df92c335617

转载于:https://www.cnblogs.com/ziqingmo/p/9100249.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值