webpack-Guide的代码(均可运行)

最新推荐文章于 2024-09-12 16:09:28 发布

_Root___

最新推荐文章于 2024-09-12 16:09:28 发布

阅读量164

点赞数

分类专栏： reactjs webpack

本文链接：https://blog.youkuaiyun.com/qq_33281069/article/details/82834951

版权

reactjs 同时被 2 个专栏收录

11 篇文章

订阅专栏

webpack

1 篇文章

订阅专栏

一直对webpack的理解没有那么深，或者说只有真的用了webpack才会记得比较清楚，在github上把webpack的全部Guide内容都运行了一遍，每一个部分作为一个分支，均可以正常打包运行。应该还会不断的更新新的内容，补充一下webpack的知识。
github上Guide的代码地址
 webpack官网地址
 webpack中文官网地址

webpack官网翻译的部分内容

当前webpack 的最新稳定版本为 3.10.0。

Hello World!

当前项目是一个空文件夹，在项目根目录的命令行中执行：yarn add -D webpack，将会生成与 webpack 相关的必要文件。

在项目根目录下新建 src 文件夹用于存放源文件。
新建 src/index.html

//src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>

新建 src/index.js

// src/index.js
console.log("Hello World!");

新建 webpack.config.js

// webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'src')
    }
};

项目根目录命令行下执行：webpack，在 src 文件夹下生成 bundle.js 文件，用浏览器打开 src/index.html，可以在浏览器的命令行中看到 Hello World! 输出。

将编译结果移动至 dist 文件夹

删除之前编译生成的 src/bundle.js。
项目根目录命令行下执行：

yarn add -D clean-webpack-plugin
yarn add -D html-webpack-plugin

修改 webpack.config.js

// webpack.config.js

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

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'src/index.html'
        })
    ]
};

删除 src/index.html 中 <script src="bundle.js"></script>这一行，html-webpack-plugin 插件将自动为我们创建这一行对应的内容。

webpack-dev-server

在项目根目录的命令行中执行：yarn add -D webpack-dev-server。
在项目根目录的命令行中执行：node_modules/.bin/webpack-dev-server，可以进入 webpack 的开发者模式。

npm 脚本

在 package.json 中添加：

{
    ...
    "scripts": {
        "build": "webpack",
        "start": "node_modules/.bin/webpack-dev-server"
    }
    ...
}

在项目根目录的命令行中可以使用 yarn build 代替 webpack 进行编译；可以使用 yarn start 代替 node_modules/.bin/webpack-dev-server 进入开发者模式。

用 typescript 代替 javascript 进行开发

在项目根目录的命令行中执行：yarn add -D typescript ts-loader安装必要的包。
在项目根目录下新建 tsconfig.json

// tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true
  }
}

将 src/index.js 修改成 src/index.ts。
修改 webpack.config.js

// webpack.config.js

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

module.exports = {
    entry: './src/index.ts',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'src/index.html'
        })
    ],
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    }
};