#### ##### 什么是WebPack，为什么要使用它？
##### 为什要使用WebPack
现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法

1. 模块化，让我们可以把复杂的程序细化为小的文件;
2. 类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能转换为JavaScript文件使浏览器可以识别；
3. Scss，less等CSS预处理器

webpack的出现恰好解决了这些繁琐的问题。
**那么问题了，不是有了gulp,grunt这些工具了吗？为什么还需要webpack?**
其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。

Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。

Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

刚开始接触webpack的人觉得配置这个东西觉得深奥，其实不是很难，跟着webpack文档，先阅读概念，接下来一步一步手动敲代码，对没错，自己要动手，要不永远不会。
#### 开始工作
我们先把目录结构搞出来，

config    //webpack配置目录
    		webpack.config.base.js //webpack 的基础配置
    		webpack.config.dev.js  //开发环境的配置
    		webpack.config.pro.js //生产环境的配置
    	dist  //构建目录，不用手动建立
    	public //静态文件目录，
    		index.html
    	scripts
    		start.js   //开发环境运行的配置
    		build.js  //打包运行的配置
    	src   //主要的开发环境
    		assets   //静态资源文件
    		App.js   //app
    		index.js //入口文件
    		index.module.scss  //scss 模块 css-module
    		index.css   //普通的css
    		index.scss  //scss
    	.babelrc  //webpack会自动调用.babelrc里的babel配置选项
    	package.json //依赖包
	 
	
webpack.config.base.js
引入必须的配置

const path = require('path');
    const webpack = require('webpack');
    const HtmlWebpackPlugin = require('html-webpack-plugin');

html-webpack-plugin 插件的基本作用就是生成html文件,详细介绍看[npm](https://www.npmjs.com/package/html-webpack-plugin "npm")

到了常见的webpack配置了，继续增加以下代码

const PROJECT_ROOT = path.join(__dirname, '../');
    const SRC = path.join(PROJECT_ROOT, '/', 'src');
    const PUBLIC = path.join(PROJECT_ROOT, '/', 'public');
    const DIST = path.join(PROJECT_ROOT, '/', 'dist');
          module.exports = {
            entry: SRC,//常说的入口文件
            output:{      //输出文件
                path:DIST,//输出的目录，
                filename:"bundle-[hash].js"  //输出的文件名
            },
    	}
	
到了webpack的重要的module模块了，其中Loaders更是重点

```javascript
Loaders是webpack提供的最激动人心的功能之一了。通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss为css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件，对React的开发而言，合适的Loaders可以把React的中用到的JSX文件转换为JS文件。

Loaders需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置，Loaders的配置包括以下几方面：

1. test：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）
2. loader：loader的名称（必须）
3. include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
4. query：为loaders提供额外的设置选项（可选）
```
继续添加以下代码：当然你需要安装对相应的loader

npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
	npm install --save-dev url-loader file-loader
	
安装这些模块可能有兼容性问题，[上一篇文章](https://ah.yxlblog.com/index/article/150.html "上一篇文章")有介绍

module:{
            rules:[
                {
                    test:/(\.js|\.jsx)$/,   //这个是配置jsx语法的
                    include: SRC,
                    use:{
                        loader: "babel-loader"
                    },
                    exclude:/node_modules/
                },
                {
                    test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],//配置图片格式
                    use:{
                        loader: require.resolve('url-loader'),
                        options: {
                          limit: 10000,
                          name: 'assets/media/[name].[hash:8].[ext]',
                        },
                    }
                  },
                  {
                    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                    loader: 'url-loader',
                    options: {
                      limit: 10000,
                      name: ('assets/fonts/[name].[hash:7].[ext]')
                    }
                  },
               
            ]
        },
到目前，我们先要测试下能否跑起来，所以继续吧dev的配置配以下，需要用到webpack-dev-server、webpack-merge
webpack.config.dev.js

const webpackConfigDev = {
        devtool: 'cheap-module-eval-source-map',
        mode:'development',
        devServer: {  //devServer 的配置
            contentBase: SRC,
            hot: true,
            inline: true,
            disableHostCheck: true,
            historyApiFallback: true,
            stats: 'minimal',
            clientLogLevel: 'warning',
        },
    }
    
    module.exports = merge(webpackConfigBase, webpackConfigDev);

回到scripts/start.js,配置开发环境启动文件，常见的webpack-dev-server的配置

最后在package.json 文件中配置 scripts

"scripts": {
        "start": "node ./scripts/start.js",
        "build": "node ./scripts/build.js"
      },
没错这样配置后就能命令行通过

npm start 
打开浏览器  http://localhost:5000 ,
当然那样配置还是会报错，而且不会自动更新，我们回到config/webpack.config.base.js,添加以下代码
    
     plugins:[
            new HtmlWebpackPlugin({
                template: PUBLIC + "/index.html",
                inlineSource: 'runtime~.+\\.js',
            }),
            new webpack.HotModuleReplacementPlugin()
        ],

最后还有css scss modul.scss 的配置项

回到webpack.config.dev.js

npm install --save-dev css-loader style-loader sass-loader node-sass
	
这里我加入了rem的适配

` module:{
            rules:[
                {
                    test: /\.css$/,   
                    use: getStyleLoaders()
                },
                {
                    test: sassRegex,
                    exclude: sassModuleRegex,//这个需要exclude sassmodule的要不编译错误
                    use: getStyleLoaders({ importLoaders: 2 }, 'sass-loader')
                },
                {
                    test: sassModuleRegex,
                    use: getStyleLoaders(
                        {
                            importLoaders: 2,
                            modules: true,
                            localIdentName: '[local]___[hash:base64:5]',
                            getLocalIdent: getCSSModuleLocalIdent,
                        },
                      'sass-loader')
                }
            ],
        },`

emmmm,说好的是react，当然少不了react react-dom 这两货

npm install --save-dev react react-dom
	
回到src的App.js,键入以下代码

import React,{ Component } from 'react';
    import styles from './index.module.scss';

class App extends Component{
        render(){
            return(
                <div className={ styles.wrapper }>
                    <h1 className={ styles.title }> react-cli  </h1>
                </div>
            );
        }
    }
    
    export default App;

这个不用说了，常见的react代码

src/index.js

import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './App';
    import './index.css';
    
    ReactDOM.render(<App />,document.querySelector('#root'));

到了这步，执行npm start，应该可以跑起来了。
详细配置看[github](https://github.com/yxl720/webpack4-react-cli "github")

webpack4.x开发一个react脚手架

关于本站

关于作者

__construct

评论区

发表评论

webpack4.x开发一个react脚手架

关于本站

关于作者

相关文章

评论区

发表评论