• 什么是webpackwebpack是一个模块打包工具,在前端中模块指的就是js,css,图片等类型文件...webpack安装使用 首先我们创立一个文件夹如study,在开始菜单打开cmd,进入该文件夹,然后进行以下步骤: 1、npm
    **什么是webpack?**
    ---------------
    	webpack是一个模块打包工具,在前端中模块指的就是js,css,图片等类型文件。webpack支持多种模块系统,而且兼容js的多种书写规范(如ES6),它可以处理模块间的相互依赖关系,对静态资源进行统一打包和发布。
    
    webpack的安装与使用
    		首先我们创立一个文件夹如study,在开始菜单打开cmd,进入该文件夹,然后进行以下步骤:
    		1、npm init       //创建一个package.json的工程文件。
    		2、npm install -g webpack     // 在全局安装webpack,若已安装过则可以跳过。
    		3、npm install --save-dev webpack  //在项目中安装webpack。 
    		创建完成之后,我们在我们的文件目录中创建两个文件夹,为dist(打包后放置的文件夹)与src(我们写项目的地方)。src文件夹中我们先创立两个文件为index.js与main.js。dist文件夹中我们创立一个index.html用来让浏览器来读取显示。结构如下:
    ![这里写图片描述](https://img-blog.csdn.net/20171023170308084?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVG9ueTE1OTAxMTI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
    
    	我们在dist/index.html中写好初始的内容,引入的js文件为bundle.js文件,这个文件就是webpack打包后生成的文件。如下图:
    ![这里写图片描述](https://img-blog.csdn.net/20171023171823211?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVG9ueTE1OTAxMTI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
    	
    	在index.js中输入“导出代码”:
    	
    
    ```
    module.exports = function() {
      var hello = document.createElement('div');
      hello.textContext = "This is index.js file."
      return hello;
    }
    ```
    将hello变量导出,在main.js接受变量,然后将该变量插入到root标签中:
    
    ```
    const hello = require('./index.js');
    document.querySelector('#root').appendChild(hello());
    ```
    	接下来我们在根目录下创建一个webpack.config.js文件用来配置webpack,我们先进行简单的配置,目前主要做的是要设置内容的入口路径以及打包后文件的存放路径。在webpack.config.js中写入以下代码块:
    	
    
    ```
    module.exports = {
      entry: __dirname + "/src/main.js",
      output:{
        path: __dirname + "/dist",
        filename: "bundle.js"
      },
    }
    ```
    	entry为唯一的入口文件,也就是webpack要从这里读取,output为输出,这里设置的是输出到dist目录下的bundle.js文件。接着运行webpack在cmd中运行   
    
    	".\\node_modules\\.bin\\webpack" 这是在windows中运行的。若已安装全局则使用 "webpack"也可以。
    	进一步我们不用以上的输入方式,在package.json中的scripts中加入   "start": "webpack" ,即可通过npm start命令来启用webpack。
    
    	package.json中的脚本部分已经默认添加了./node_modules/.bin路径,所以我们也不需要输入详细的路径地址了。start是一个特殊的脚本名称,我们也可以起其他的名字,但是如果对应的不是start那么我们要启动时必须要使用npm run {你在script中所用的名字} 如npm run build。
    
    webpack的在开发生产时的具体功能
    -------------------
    	开发时需要调试代码,在打包过后如果出错我们就需要调试工具来帮我们改正错误。Source Map就是帮我们解决这个难题的。他要在我们的webpack.config.js文件中进行配置,属性名为devtool,他有四种选项来让使用者来选择。
    	1、source-map: 在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包文件的构建速度;
    	2、cheap-module-source-map: 在一个单独的文件中生成一个不带列映射的map,不带列映射提高项目构建速度,但是也使得浏览器开发者工具只能对应到具体的行,不能对应到具体的列(符号),会对调试造成不便;
    	3、eval-source-map: 使用eval打包源文件模块,在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap,但是对打包后输出的JS文件的执行具有性能和安全的隐患。不过在开发阶段这是一个非常好的选项,但是在生产阶段一定不要用这个选项;
    	4、cheap-module-eval-source-map: 这是在打包文件时最快的生成source map的方法,生成的Source Map 会和打包后的JavaScript文件同行显示,没有列映射,和eval-source-map选项具有相似的缺点。
    	我们这里用第三种方法。在webpack.config.js进行以下配置:
    	
    
    ```
    module.exports = {
      devtool: 'eval-source-map',
      entry: __dirname + "/src/main.js",
      output:{
        path: __dirname + "/dist",
        filename: "bundle.js"
      },
    }
    
    ```
    这四种方式从上到下打包速度回越来越快,当然隐患越来越多,所以在生产阶段还是用第一种为好。
    
    使用webpack构建本地服务器
    	webpack提供一个可选的可以检测代码的修改并自动刷新页面的本地服务器。该服务器是基于node.js的,不过我们需要单独安装它作为项目依赖。
    	npm install --save-dev webpack-dev-server
    	
    	devserver作为webpack配置选项中的一项,以下是它的一些主要配置选项:
    	
    	1、contentBase: 默认webpack-dev-server会为根文件夹提供本地服务器,如果想为另外一个目录下的文件提供本地服务器,应该在这里设置其所在目录(本例设置到“public"目录)
    	2、port: 设置默认监听端口,如果省略,默认为“8080”
    	3、inline: 设置为true,当源文件改变时会自动刷新页面
    	4、historyApiFallback: 在开发单页应用时非常有用,它依赖于HTML5 history API,如果设置为true,所有的跳转将指向index.html
    	代码如下:
    	
    
    ```
    module.exports = {
      devtool: 'eval-source-map',
    
      entry: __dirname + "/src/main.js",
    
      output:{
        path: __dirname + "/dist",
        filename: "bundle.js"
      },
    
      devServer:{
        contentBase: "./dist", //读取目录
        port: 8000,   //端口号
        inline: true, //实时刷新
        historyApiFallback: true //单页面不跳转
      },
    }
    
    ```
    接着我们要在package.json中配置server代码如下:
    
    ```
    {
      "name": "study-webpack",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "start": "webpack",
        "test": "echo \"Error: no test specified\" && exit 1",
        "server": "webpack-dev-server --open"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "webpack": "^3.8.1",
        "webpack-dev-server": "^2.9.3"
      }
    }
    
    ```
    接着在cmd中输入   npm run server 即可在浏览器中打开本地服务器。
    
    Loaders
    	loaders作为webpack的强大功能之一,它的作用就是让webpack调用外部脚本和工具来对不同的格式的文件进行处理。Loaders需要单独安装并且需要在webpack.config.js下的modules关键字下进行配置,Loaders的配置选项包括以下几方面:
    	1、test:一个匹配loaders所处理的文件的扩展名的正则表达式。
    	2、loader: loader的名称(必需)。
    	3、include/exclude:手动添加:手动添加需要的文件夹或者屏蔽掉不需要选择的文件。
    	4、query: 为loaders提供了额外的设置选项。
    	
    babel
    	babel是一个编译js的平台,它可以帮助你的代码编译称为浏览器识别的代码。并且它还可以把js的扩展语言JSX编译称为浏览器识别的语句。
    	安装依赖包:  npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react 
    	下面我们在webpack.config.js中来配置loader和babel:
    	
    
    ```
    module.exports = {
      devtool: 'eval-source-map',
    
      entry: __dirname + "/src/main.js",
    
      output:{
        path: __dirname + "/dist",
        filename: "bundle.js"
      },
    
      module: {
        loaders:[{
          test: /\.js$/,   //需要匹配的文件扩展名
          exclude: /node_modules/, // 排除不需要处理的文件夹
          loader: 'babel-loader', //  所用的loader名称
          query:{
    	        presets: ['es2015', 'react']  // 支持es5与react
          }
        }]
      },
    
      devServer:{
        contentBase: "./dist", //读取目录
        port: 2333,   //端口号
        inline: true, //实时刷新
        historyApiFallback: true //单页面不跳转
      },
    }
    
    ```
    	
    	完成以上工作后接着来安装react
    	npm install --save react react-dom
    	接着修改src文件夹中的Index.js与main.js的代码,react使用的版本"react": "^16.0.0":
    	以下是Index.js代码:
    	
    
    ```
    import React from 'react';
    import ReactDOM from 'react-dom';
    
    class Greeter extends React.Component{
      render() {
        return (
          
            my god
          
        );
      }
    };
    
    export default Greeter
    
    ```
    	以下为main.js代码:
    	
    
    ```
    import React from 'react';
    import ReactDOM from 'react-dom';
    import Greeter from './Index';
    
    ReactDOM.render(, document.getElementById('root'));
    
    ```
    Babel的配置选项
    
    	因为babel有非常多的配置选项,在单一的webpack.config.js文件中进行配置往往使得这个文件显得太复杂,因此一些开发者支持把babel的配置选项放在一个单独的名为 ".babelrc" 的配置文件中。因此现在我们就提取出相关部分,分两个配置文件进行配置(webpack会自动调用.babelrc里的babel配置选项)。
    	将webpack.config.js中的query去掉,建立.babelrc文件写出一下代码:
    	
    
    ```	
    {
      "presets": ["react", "es2015"]
    }
    ```
    
    css的相关安装
    	webpack把所有文件当成模块处理,只要有合适的loaders,它都可以被当做模块来处理。webpack提供两个工具处理样式表css-loader,style-loader,二者处理的任务不同,css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中,二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。
    
    安装loader	
    
    	npm install --save-dev style-loader css-loader
    接着webpack.config.js中添加loaders
    
    ```
    module.exports = {
      devtool: 'eval-source-map',
    
      entry: __dirname + "/src/main.js",
    
      output:{
        path: __dirname + "/dist",
        filename: "bundle.js"
      },
    
      module: {
        loaders:[
          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
          },
          {
            test: /\.css$/,
            loader: 'style-loader!css-loader'
          }
        ]
      },
    
      devServer:{
        contentBase: "./dist", //读取目录
        port: 2333,   //端口号
        inline: true, //实时刷新
        historyApiFallback: true //单页面不跳转
      },
    }
    ```
    接着我们可以创立一个css文件,记好路径,在main.js中(也就是webpack的入口文件)我们导入css文件即可使用。
    
    这里题外说个问题,我们想在react中使用sass,就在此基础上先进行npm下载
    加载:   npm install sass-loader node-sass --save-dev
    之后我们在webpack.config.js中添加loaders
    
    ```
    module.exports = {
      devtool: 'eval-source-map',
    
      entry: __dirname + "/src/main.js",
    
      output:{
        path: __dirname + "/dist",
        filename: "bundle.js"
      },
    
      module: {
        loaders:[
          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
          },
          {
            test: /\.(css|scss)$/,
            loader: 'style-loader!css-loader!sass-loader'
          }
        ]
      },
    
      devServer:{
        contentBase: "./dist", //读取目录
        port: 2333,   //端口号
        inline: true, //实时刷新
        historyApiFallback: true //单页面不跳转
      },
    }
    
    ```
    	之后再style文件夹中创立一个scss文件导入到main.js文件中即可使用了。
    
    eslint的安装与使用
    	首先安装依赖包  npm install --save-dev eslint eslint-loader
    	通过配置webpack.congfig.js以及创建.eslintrc文件来配置好初始值即可在项目中使用eslint。
    	webpack.config.js:
    	
    
    ```
    module.exports = {
      devtool: 'eval-source-map',
    
      entry: __dirname + "/src/main.js",
    
      output:{
        path: __dirname + "/dist",
        filename: "bundle.js"
      },
    
      module: {
        loaders:[
          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader!eslint-loader'
          },
          {
            test: /\.(css|scss)$/,
            loader: 'style-loader!css-loader!sass-loader'
          }
        ]
      },
    
      devServer:{
        contentBase: "./dist", //读取目录
        port: 2333,   //端口号
        inline: true, //实时刷新
        historyApiFallback: true //单页面不跳转
      },
    };
    
    ```
    
    .eslintrc
    
    ```
    {
    	"parser": "babel-eslint",
    	"rules": {
    		"semi": [
    			"error",
    			"always"
    		]
    	}
    }
    ```
    eslint的相关规则根据自己的需求来制定即可。之后大家即可进行基本的编写了~~
    
    
    参考链接: http://blog.csdn.net/fengyinchao/article/details/52100357 
    展开全文
  • 主要是针对 webpack + es6 + reactWeb 安装使用及其所遇到的问题,为了不耽误大家宝贵的时间及其阅读繁琐,我先一次性的把安装使用的步骤介绍完,然后在分析所遇到的问题!安装使用使用node npm进行安装,首先,我先...
  • 当时对webpack使用也知之甚少,根本不会搭建react项目。最近,由于一个项目使用react.js,花了点时间,自己搭建了一个react的项目。将步骤记录于此,以免忘记。 项目目录结构: 创建项目步骤: 安装依赖包:...
  • 使用 Webpack 开发 React 组件库 组件库设计要求 使用 webpack 做模块开发以及打包 打包后的格式为 umd 模块 Code Splitting 代码分割 第三方包排除打包 react、antd 、lodash 等 样式文件抽离 借助 babel-plugin-...
  • 先来认识一下webpack的基本配置现在开发搭建开发环境第一步:在react-music-player文件目录下,执行npm init创建package.json文件。这时,代码当中的配置文件就已生成啦:第二步:现在配置文件中...
  • webpack解析react jsx 2019-06-06 17:44:51
    webpack解析react jsx 安装react babel-preset-react npm i react react-dom @babel/preset-react -D 在.babelrc文件增加 “@babel/preset-react”,
  • 使用NPM进行webpack+react 基础环境配置 最近学习react,所以环境配置就必不可少,下面是自己整理的属于自己的一种webpack+react基础环境配置 前提 在自己的机子上已经安装了node.js,如果没有,请先安装node...
  • 原文地址:https://www.onmpw.com/tm/xwzj/web_150.html使用webpack编译打包react是非常便捷的。...react安装当然,使用react必须先安装reactreact-dom,其安装方式很简单(前提是我们必须安装有npm)。# npm...
  • 使用webpack搭建react项目 2019-07-23 16:25:26
    初始化项目 新建一个文件夹,进入此文件夹,执行: ...安装开发环境依赖:npm install --save-dev babel-core babel-loader babel-plugin-import babel-preset-latest babel-preset-react babel-preset-sta...
  • WEBPACK+REACT开发环境搭建 2017-05-25 15:42:58
    WEBPACK+REACT开发环境搭建 一、安装Node.js Node.js可以直接从官网下载,按照默认的安装方式安装即可。 二、安装webpack Webpack可以使用npm安装,新建一个空的练习文件夹,在终端中转到该文件夹后执行...
  • 前言:本文只是本人使用webpack搭建基础react项目的的记录,仅供参考。 第一步:首先请确保node、npm已安装 。 可以在控制台通过输入:node -v //回车 <查看出现node版本,则安装成功> 可以在控制台通过输入:...
  • 简评:相信很多开发者在入门 react 的时候都是使用 create-react-app 或 react-slingshot 这些脚手架来快速创建应用,当有特殊需求,需要修改 eject 出来的 webpack 配置文件时,面对各种配置项不知如何下手,本文...
  • 使用webpack搭建react环境 2019-08-29 08:09:27
    tip:虽然官方提供了create-react-app的方式来创建react项目,但是还是想用用webpack来搭建下,当然create-react-app也是建立在webpack上的,可以使用npm run eject来调取webpack的配置文件 首先创建一个空文件夹,...
  • webpack打包react项目基本步揍以及实践过程中遇到的问题
  • 我们学习react、angular、vue等前端框架的时候,都需要用到webpack、grunt、gulp等构建工具来构建整个项目,至于为什么用webpack,因为>>笔者只接触过webpack。 笔者在学习react的时候,webpack构建这块卡在那里让...
  • 目前网络上关于react和antd的教程有很多,在构建项目阶段大多create-react-app,dva等脚手架工具进行搭建,使用工具固然方便,却总感觉没能真正完全掌握这门技术,于是自己尝试从头搭建了一个项目 1.环境  本机使用...
  • 之前最原始的方式写过一个React的hello world,参见:原始React hello world在React的官网上面会介绍好几种方式去安装React,下面尝试通过Webpack安装:npm i -D react react-dom安装完成后的版本:"react": "^...
  • 安装首先你需要点击这里安装 nodejs(npm)。然后执行:建立一个目录...npm init安装相关组件这里包括了本文所需要的全部组件npm i --save-dev react react-dom react-transform-hmr webpack webpack-dev-server babel
  • 天天直接使用creat-react-app 也是腻了 偶尔想试试自己动手搭建一个基于webpackreact项目 毕竟 你脚手架建立的也是基于webpack建立 还是老样子废话不多说直接上代码 1.在桌面新建立一个空白文件夹 webpack-...
  • 其中webpack作为构建react组件的有效工具,可以大大提高我们的开发效率与使用效果。网上也有了很多入门文章。 但是,由于reactwebpack版本的迭代导致这些入门介绍教程,或因存在版本变动,或因存在api变动,或因...
1 2 3 4 5 ... 20
收藏数 32,386
精华内容 12,954