使用Webpack自己手动搭建一个demo，可以将es6语法转为

2019-03-29 本文已影响0人华戈的小书

什么是webpack？

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

环境

默认你已经安装了node。

开始

首先新建一个文件夹demo
进入demo文件夹下，使用npm init命令初始化一个package.json文件
如果你觉得npm的下载速率太慢的话，可以使用以下命令修改源为淘宝镜像

npm config set registry https://registry.npm.taobao.org

在当前路径下新建如下文件：

// 文件目录
- app  // 文件夹
    -main.js
    -index.css
- index.html
...

// main.js
import React from 'react';
import ReactDOM from 'react-dom';
import styles from './index.css';

class App extends React.Component {
  render() {
    return (
        <div>
          <h1 className={styles.h1}>Hello World</h1>
          <h2>Hello Webpack</h2>
          <s>delete</s>
        </div>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('root'));

// index.css
.h1 {
    color: orange;
}

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

正式开始使用webpack

首先全局下载webpack、webpack-cli和webpack-dev-server

npm i -g webpack webpack-dev-server webpack-cli

npm i --save-dev webpack webpack-dev-server
npm i --save react react-dom

我们这时候需要在根目录下新建一个webpack.config.js文件，用来配置webpack

// webpack.config.js
module.exports = {
    entry: '/app/main.js',
    output: {
        filename: 'bundle.js'
    }
}

这时我们修改package.json文件

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open",
    "build": "webpack -p"
  },

然后只需要使用npm run build命令就可以快速打包生成一个bundle.js文件
这时我们配置其他项

var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
    entry: '/app/main.js',
    output: {
        filename: 'bundle.js'
    },
    plugins: [
        new UglifyJsPlugin() // 压缩混淆输出的 js 代码
    ],
    module: {
        rules: [ // 规则
            {
                test: /\.js[x]?$/,
                exclude: /node_modules/, // 匹配的范围包括node_modules里的文件
                use: {
                    loader: 'babel-loader', // 使用babel-loader将ES6/jsx语法转化为ES5语法
                    options: {
                        presets: ['es2015', 'react']
                        // 使用 Babel 的预设插件 babel-preset-es2015 and babel-preset-react 来转义 ES6 和 React。
                    }
                }
            },
            {
                test: /\.css$/, // 匹配到.css后缀的文件名
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader',
                        // 开启 CSS Module 功能
                        options: {
                            modules: true
                        }
                    }
                ]
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.css', '.jsx', '.scss', '.less']
    }
};

npm run build可能会报如下错误:
cdCannot find module '@babel/core' babel-loader@8 requires Babel 7.x,如果按我上面步骤我们装的babel-loader是8.0.4版本，因为我们只需要重新装7版本。

npm install babel-loader@7 --save-dev

同时在根目录下新建一个.eslintrc.js文件，下面是一个通用的eslint配置。

// .eslintrc.js
module.exports = {
  parser: 'babel-eslint',
  extends: ['airbnb', 'prettier'],
  env: {
    browser: true,
    node: true,
    es6: true,
    mocha: true,
    jest: true,
    jasmine: true,
  },
  rules: {
    indent: ['error', 4],
    'generator-star-spacing': [0],
    'consistent-return': [0],
    'react/forbid-prop-types': [0],
    'react/jsx-filename-extension': [1, { extensions: ['.js'] }],
    'global-require': [1],
    'import/prefer-default-export': [0],
    'react/jsx-no-bind': [0],
    'react/prop-types': [0],
    "react/jsx-indent": [4, "space"],
    'react/prefer-stateless-function': [0],
    'react/jsx-one-expression-per-line': [0],
    'react/jsx-wrap-multilines': [
      'error',
      {
        declaration: 'parens-new-line',
        assignment: 'parens-new-line',
        return: 'parens-new-line',
        arrow: 'parens-new-line',
        condition: 'parens-new-line',
        logical: 'parens-new-line',
        prop: 'ignore',
      },
    ],
    'no-else-return': [0],
    'no-restricted-syntax': [0],
    'import/no-extraneous-dependencies': [0],
    'no-use-before-define': [0],
    'jsx-a11y/no-static-element-interactions': [0],
    'jsx-a11y/no-noninteractive-element-interactions': [0],
    'jsx-a11y/click-events-have-key-events': [0],
    'jsx-a11y/anchor-is-valid': [0],
    'no-nested-ternary': [0],
    'arrow-body-style': [0],
    'import/extensions': [0],
    'no-bitwise': [0],
    'no-cond-assign': [0],
    'import/no-unresolved': [0],
    'comma-dangle': [
      'error',
      {
        arrays: 'always-multiline',
        objects: 'always-multiline',
        imports: 'always-multiline',
        exports: 'always-multiline',
        functions: 'ignore',
      },
    ],
    'object-curly-newline': [0],
    'function-paren-newline': [0],
    'no-restricted-globals': [0],
    'require-yield': [1],
  },
  parserOptions: {
    ecmaFeatures: {
      experimentalObjectRestSpread: true,
    },
  },
  settings: {
    polyfills: ['fetch', 'promises'],
  },
};

虽然配置了eslint，但是他会校验所有的文件，但我们总有一些文件不想要被校验，我们可以在根目录新建一个.eslintignore文件

// .eslintignore 配置
/dist // 忽略打包生成的文件
/node_modules // 忽略依赖的包

最后的package.json的配置项为

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "cross-env DEBUG=false webpack-dev-server --open",
    "dev": "webpack-dev-server --open",
    "build": "webpack -p"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^2.1.1",
    "eslint": "^5.15.3",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^4.1.0",
    "eslint-friendly-formatter": "^4.0.1",
    "eslint-loader": "^2.1.2",
    "eslint-plugin-babel": "^5.1.0",
    "eslint-plugin-compat": "^2.1.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-markdown": "^1.0.0-beta.6",
    "eslint-plugin-react": "^7.0.1",
    "style-loader": "^0.23.1",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "uglifyjs-webpack-plugin": "^2.1.2",
    "webpack-dev-server": "^3.2.1"
  },
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
  }
}

你需要将其中的依赖使用npm install --save-dev一个个下载下来，或者将package.json文件的内容复制过去，然后直接使用npm i就可以直接下载

总结

你可以使用npm run dev命令启动demo项目，他会在浏览器自动打开localhost:8080，在你修改代码时，浏览器会自动刷新你修改的部分，同时编辑器会校验eslint规范。
demo源码地址 demo

使用Webpack自己手动搭建一个demo，可以将es6语法转为

什么是webpack？

环境

开始

正式开始使用webpack

总结

猜你喜欢

热点阅读