入门Webpack,看这篇就够了

作者: 7091a52ac9e5 | 来源:发表于2016-08-05 11:21 被阅读772844次

    2017年12月7日更新,添加了clean-webpack-plugin,babel-env-preset,添加本文涉及到的所有代码的示例,如果你在学习过程中出错了,可点击此处参考

    写在前面的话

    阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过;如果你和十天前的我一样,对很多选项存在着疑惑,那花一段时间慢慢阅读本文,你的疑惑一定一个一个都会消失;如果你以前没怎么接触过Webpack,而你又你对webpack感兴趣,那么动手跟着本文中那个贯穿始终的例子写一次,写完以后你会发现你已明明白白的走进了Webpack的大门。

    // 一个常见的`webpack`配置文件
    const webpack = require('webpack');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const ExtractTextPlugin = require('extract-text-webpack-plugin');
    
    module.exports = {
            entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件
            output: {
                path: __dirname + "/build",
                filename: "bundle-[hash].js"
            },
            devtool: 'none',
            devServer: {
                contentBase: "./public", //本地服务器所加载的页面所在的目录
                historyApiFallback: true, //不跳转
                inline: true,
                hot: true
            },
            module: {
                rules: [{
                        test: /(\.jsx|\.js)$/,
                        use: {
                            loader: "babel-loader"
                        },
                        exclude: /node_modules/
                    }, {
                        test: /\.css$/,
                        use: ExtractTextPlugin.extract({
                            fallback: "style-loader",
                            use: [{
                                loader: "css-loader",
                                options: {
                                    modules: true,
                                    localIdentName: '[name]__[local]--[hash:base64:5]'
                                }
                            }, {
                                loader: "postcss-loader"
                            }],
                        })
                    }
                }
            ]
        },
        plugins: [
            new webpack.BannerPlugin('版权所有,翻版必究'),
            new HtmlWebpackPlugin({
                template: __dirname + "/app/index.tmpl.html" //new 一个这个插件的实例,并传入相关的参数
            }),
            new webpack.optimize.OccurrenceOrderPlugin(),
            new webpack.optimize.UglifyJsPlugin(),
            new ExtractTextPlugin("style.css")
        ]
    };
    
    

    什么是WebPack,为什么要使用它?

    为什要使用WebPack

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

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

    这些改进确实大大的提高了我们的开发效率,但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的,这就为WebPack类的工具的出现提供了需求。

    什么是Webpack

    WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。

    WebPack和Grunt以及Gulp相比有什么特性

    其实Webpack和另外两个并没有太多的可比性,Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。

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


    Grunt和Gulp的工作流程

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


    Webpack工作方式

    如果实在要把二者进行比较,Webpack的处理速度更快更直接,能打包更多不同类型的文件。

    开始使用Webpack

    初步了解了Webpack工作方式后,我们一步步的开始学习使用Webpack。

    安装

    Webpack可以使用npm安装,新建一个空的练习文件夹(此处命名为webpack sample project),在终端中转到该文件夹后执行下述指令就可以完成安装。

    //全局安装
    npm install -g webpack
    //安装到你的项目目录
    npm install --save-dev webpack
    

    正式使用Webpack前的准备

    1. 在上述练习文件夹中创建一个package.json文件,这是一个标准的npm说明文件,里面蕴含了丰富的信息,包括当前项目的依赖模块,自定义的脚本任务等等。在终端中使用npm init命令可以自动创建这个package.json文件
    npm init
    

    输入这个命令后,终端会问你一系列诸如项目名称,项目描述,作者等信息,不过不用担心,如果你不准备在npm中发布你的模块,这些问题的答案都不重要,回车默认即可。

    1. package.json文件已经就绪,我们在本项目中安装Webpack作为依赖包
    // 安装Webpack
    npm install --save-dev webpack
    
    1. 回到之前的空文件夹,并在里面创建两个文件夹,app文件夹和public文件夹,app文件夹用来存放原始数据和我们将写的JavaScript模块,public文件夹用来存放之后供浏览器读取的文件(包括使用webpack打包生成的js文件以及一个index.html文件)。接下来我们再创建三个文件:
    • index.html --放在public文件夹中;
    • Greeter.js-- 放在app文件夹中;
    • main.js-- 放在app文件夹中;

    此时项目结构如下图所示


    项目结构

    我们在index.html文件中写入最基础的html代码,它在这里目的在于引入打包后的js文件(这里我们先把之后打包后的js文件命名为bundle.js,之后我们还会详细讲述)。

    <!-- 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>
    

    我们在Greeter.js中定义一个返回包含问候信息的html元素的函数,并依据CommonJS规范导出这个函数为一个模块:

    // Greeter.js
    module.exports = function() {
      var greet = document.createElement('div');
      greet.textContent = "Hi there and greetings!";
      return greet;
    };
    

    main.js文件中我们写入下述代码,用以把Greeter模块返回的节点插入页面。

    //main.js 
    const greeter = require('./Greeter.js');
    document.querySelector("#root").appendChild(greeter());
    

    正式使用Webpack

    webpack可以在终端中使用,在基本的使用方法如下:

    # {extry file}出填写入口文件的路径,本文中就是上述main.js的路径,
    # {destination for bundled file}处填写打包文件的存放路径
    # 填写路径的时候不用添加{}
    webpack {entry file} {destination for bundled file}
    

    指定入口文件后,webpack将自动识别项目所依赖的其它文件,不过需要注意的是如果你的webpack不是全局安装的,那么当你在终端中使用此命令时,需要额外指定其在node_modules中的地址,继续上面的例子,在终端中输入如下命令

    # webpack非全局安装的情况
    node_modules/.bin/webpack app/main.js public/bundle.js
    

    结果如下

    使用命令行打包

    可以看出webpack同时编译了main.jsGreeter,js,现在打开index.html,可以看到如下结果

    htmlResult1

    有没有很激动,已经成功的使用Webpack打包了一个文件了。不过在终端中进行复杂的操作,其实是不太方便且容易出错的,接下来看看Webpack的另一种更常见的使用方法。

    通过配置文件来使用Webpack

    Webpack拥有很多其它的比较高级的功能(比如说本文后面会介绍的loadersplugins),这些功能其实都可以通过命令行模式实现,但是正如前面提到的,这样不太方便且容易出错的,更好的办法是定义一个配置文件,这个配置文件其实也是一个简单的JavaScript模块,我们可以把所有的与打包相关的信息放在里面。

    继续上面的例子来说明如何写这个配置文件,在当前练习文件夹的根目录下新建一个名为webpack.config.js的文件,我们在其中写入如下所示的简单配置代码,目前的配置主要涉及到的内容是入口文件路径和打包后文件的存放路径。

    module.exports = {
      entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
      output: {
        path: __dirname + "/public",//打包后的文件存放的地方
        filename: "bundle.js"//打包后输出文件的文件名
      }
    }
    

    :“__dirname”是node.js中的一个全局变量,它指向当前执行脚本所在的目录。

    有了这个配置之后,再打包文件,只需在终端里运行webpack(非全局安装需使用node_modules/.bin/webpack)命令就可以了,这条命令会自动引用webpack.config.js文件中的配置选项,示例如下:

    配合配置文件进行打包

    又学会了一种使用Webpack的方法,这种方法不用管那烦人的命令行参数,有没有感觉很爽。如果我们可以连webpack(非全局安装需使用node_modules/.bin/webpack)这条命令都可以不用,那种感觉会不会更爽~,继续看下文。

    更快捷的执行打包任务

    在命令行中输入命令需要代码类似于node_modules/.bin/webpack这样的路径其实是比较烦人的,不过值得庆幸的是npm可以引导任务执行,对npm进行配置后可以在命令行中使用简单的npm start命令来替代上面略微繁琐的命令。在package.json中对scripts对象进行相关设置即可,设置方法如下。

    {
      "name": "webpack-sample-project",
      "version": "1.0.0",
      "description": "Sample webpack project",
      "scripts": {
        "start": "webpack" // 修改的是这里,JSON文件不支持注释,引用时请清除
      },
      "author": "zhang",
      "license": "ISC",
      "devDependencies": {
        "webpack": "3.10.0"
      }
    }
    

    注:package.json中的script会安装一定顺序寻找命令对应位置,本地的node_modules/.bin路径就在这个寻找清单中,所以无论是全局还是局部安装的Webpack,你都不需要写前面那指明详细的路径了。

    npm的start命令是一个特殊的脚本名称,其特殊性表现在,在命令行中使用npm start就可以执行其对于的命令,如果对应的此脚本名称不是start,想要在命令行中运行时,需要这样用npm run {script name}npm run build,我们在命令行中输入npm start试试,输出结果如下:

    使用npm start 打包代码

    现在只需要使用npm start就可以打包文件了,有没有觉得webpack也不过如此嘛,不过不要太小瞧webpack,要充分发挥其强大的功能我们需要修改配置文件的其它选项,一项项来看。

    Webpack的强大功能

    生成Source Maps(使调试更容易)

    开发总是离不开调试,方便的调试能极大的提高开发效率,不过有时候通过打包后的文件,你是不容易找到出错了的地方,对应的你写的代码的位置的,Source Maps就是来帮我们解决这个问题的。

    通过简单的配置,webpack就可以在打包时为我们生成的source maps,这为我们提供了一种对应编译文件和源文件的方法,使得编译后的代码可读性更高,也更容易调试。

    webpack的配置文件中配置source maps,需要配置devtool,它有以下四种不同的配置选项,各具优缺点,描述如下:

    devtool选项 配置结果
    source-map 在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包速度;
    cheap-module-source-map 在一个单独的文件中生成一个不带列映射的map,不带列映射提高了打包速度,但是也使得浏览器开发者工具只能对应到具体的行,不能对应到具体的列(符号),会对调试造成不便;
    eval-source-map 使用eval打包源文件模块,在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap,但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项,在生产阶段则一定不要启用这个选项;
    cheap-module-eval-source-map 这是在打包文件时最快的生成source map的方法,生成的Source Map 会和打包后的JavaScript文件同行显示,没有列映射,和eval-source-map选项具有相似的缺点;

    正如上表所述,上述选项由上到下打包速度越来越快,不过同时也具有越来越多的负面作用,较快的打包速度的后果就是对打包后的文件的的执行有一定影响。

    对小到中型的项目中,eval-source-map是一个很好的选项,再次强调你只应该开发阶段使用它,我们继续对上文新建的webpack.config.js,进行如下配置:

    module.exports = {
      devtool: 'eval-source-map',
      entry:  __dirname + "/app/main.js",
      output: {
        path: __dirname + "/public",
        filename: "bundle.js"
      }
    }
    

    cheap-module-eval-source-map方法构建速度更快,但是不利于调试,推荐在大型项目考虑时间成本时使用。

    使用webpack构建本地服务器

    想不想让你的浏览器监听你的代码的修改,并自动刷新显示修改后的结果,其实Webpack提供一个可选的本地开发服务器,这个本地服务器基于node.js构建,可以实现你想要的这些功能,不过它是一个单独的组件,在webpack中进行配置之前需要单独安装它作为项目依赖

    npm install --save-dev webpack-dev-server
    

    devserver作为webpack配置选项中的一项,以下是它的一些配置选项,更多配置可参考这里

    devserver的配置选项 功能描述
    contentBase 默认webpack-dev-server会为根文件夹提供本地服务器,如果想为另外一个目录下的文件提供本地服务器,应该在这里设置其所在目录(本例设置到“public"目录)
    port 设置默认监听端口,如果省略,默认为”8080“
    inline 设置为true,当源文件改变时会自动刷新页面
    historyApiFallback 在开发单页应用时非常有用,它依赖于HTML5 history API,如果设置为true,所有的跳转将指向index.html

    把这些命令加到webpack的配置文件中,现在的配置文件webpack.config.js如下所示

    module.exports = {
      devtool: 'eval-source-map',
    
      entry:  __dirname + "/app/main.js",
      output: {
        path: __dirname + "/public",
        filename: "bundle.js"
      },
    
      devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
      } 
    }
    

    package.json中的scripts对象中添加如下命令,用以开启本地服务器:

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

    在终端中输入npm run server即可在本地的8080端口查看结果

    开启本地服务器

    Loaders

    鼎鼎大名的Loaders登场了!

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

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

    • test:一个用以匹配loaders所处理文件的拓展名的正则表达式(必须)
    • loader:loader的名称(必须)
    • include/exclude:手动添加必须处理的文件(文件夹)或屏蔽不需要处理的文件(文件夹)(可选);
    • query:为loaders提供额外的设置选项(可选)

    不过在配置loader之前,我们把Greeter.js里的问候消息放在一个单独的JSON文件里,并通过合适的配置使Greeter.js可以读取该JSON文件的值,各文件修改后的代码如下:

    在app文件夹中创建带有问候信息的JSON文件(命名为config.json)

    {
      "greetText": "Hi there and greetings from JSON!"
    }
    

    更新后的Greeter.js

    var config = require('./config.json');
    
    module.exports = function() {
      var greet = document.createElement('div');
      greet.textContent = config.greetText;
      return greet;
    };
    

    由于webpack3.*/webpack2.*已经内置可处理JSON文件,这里我们无需再添加webpack1.*需要的json-loader。在看如何具体使用loader之前我们先看看Babel是什么?

    Babel

    Babel其实是一个编译JavaScript的平台,它可以编译代码帮你达到以下目的:

    • 让你能使用最新的JavaScript代码(ES6,ES7...),而不用管新标准是否被当前使用的浏览器完全支持;
    • 让你能使用基于JavaScript进行了拓展的语言,比如React的JSX;

    Babel的安装与配置

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

    我们先来一次性安装这些依赖包

    // npm一次性安装多个依赖模块,模块之间用空格隔开
    npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
    

    webpack中配置Babel的方法如下:

    module.exports = {
        entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
        output: {
            path: __dirname + "/public",//打包后的文件存放的地方
            filename: "bundle.js"//打包后输出文件的文件名
        },
        devtool: 'eval-source-map',
        devServer: {
            contentBase: "./public",//本地服务器所加载的页面所在的目录
            historyApiFallback: true,//不跳转
            inline: true//实时刷新
        },
        module: {
            rules: [
                {
                    test: /(\.jsx|\.js)$/,
                    use: {
                        loader: "babel-loader",
                        options: {
                            presets: [
                                "env", "react"
                            ]
                        }
                    },
                    exclude: /node_modules/
                }
            ]
        }
    };
    

    现在你的webpack的配置已经允许你使用ES6以及JSX的语法了。继续用上面的例子进行测试,不过这次我们会使用React,记得先安装 React 和 React-DOM

    npm install --save react react-dom
    

    接下来我们使用ES6的语法,更新Greeter.js并返回一个React组件

    //Greeter,js
    import React, {Component} from 'react'
    import config from './config.json';
    
    class Greeter extends Component{
      render() {
        return (
          <div>
            {config.greetText}
          </div>
        );
      }
    }
    
    export default Greeter
    

    修改main.js如下,使用ES6的模块定义和渲染Greeter模块

    // main.js
    import React from 'react';
    import {render} from 'react-dom';
    import Greeter from './Greeter';
    
    render(<Greeter />, document.getElementById('root'));
    

    重新使用npm start打包,如果之前打开的本地服务器没有关闭,你应该可以在localhost:8080下看到与之前一样的内容,这说明reactes6被正常打包了。

    localhost:8080

    Babel的配置

    Babel其实可以完全在 webpack.config.js 中进行配置,但是考虑到babel具有非常多的配置选项,在单一的webpack.config.js文件中进行配置往往使得这个文件显得太复杂,因此一些开发者支持把babel的配置选项放在一个单独的名为 ".babelrc" 的配置文件中。我们现在的babel的配置并不算复杂,不过之后我们会再加一些东西,因此现在我们就提取出相关部分,分两个配置文件进行配置(webpack会自动调用.babelrc里的babel配置选项),如下:

    module.exports = {
        entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
        output: {
            path: __dirname + "/public",//打包后的文件存放的地方
            filename: "bundle.js"//打包后输出文件的文件名
        },
        devtool: 'eval-source-map',
        devServer: {
            contentBase: "./public",//本地服务器所加载的页面所在的目录
            historyApiFallback: true,//不跳转
            inline: true//实时刷新
        },
        module: {
            rules: [
                {
                    test: /(\.jsx|\.js)$/,
                    use: {
                        loader: "babel-loader"
                    },
                    exclude: /node_modules/
                }
            ]
        }
    };
    
    
    //.babelrc
    {
      "presets": ["react", "env"]
    }
    

    到目前为止,我们已经知道了,对于模块,Webpack能提供非常强大的处理功能,那那些是模块呢。

    一切皆模块

    Webpack有一个不可不说的优点,它把所有的文件都都当做模块处理,JavaScript代码,CSS和fonts以及图片等等通过合适的loader都可以被处理。

    CSS

    webpack提供两个工具处理样式表,css-loaderstyle-loader,二者处理的任务不同,css-loader使你能够使用类似@importurl(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中,二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。

    继续上面的例子

    //安装
    npm install --save-dev style-loader css-loader
    
    //使用
    module.exports = {
    
       ...
        module: {
            rules: [
                {
                    test: /(\.jsx|\.js)$/,
                    use: {
                        loader: "babel-loader"
                    },
                    exclude: /node_modules/
                },
                {
                    test: /\.css$/,
                    use: [
                        {
                            loader: "style-loader"
                        }, {
                            loader: "css-loader"
                        }
                    ]
                }
            ]
        }
    };
    

    请注意这里对同一个文件引入多个loader的方法。

    接下来,在app文件夹里创建一个名字为"main.css"的文件,对一些元素设置样式

    /* main.css */
    html {
      box-sizing: border-box;
      -ms-text-size-adjust: 100%;
      -webkit-text-size-adjust: 100%;
    }
    
    *, *:before, *:after {
      box-sizing: inherit;
    }
    
    body {
      margin: 0;
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }
    
    h1, h2, h3, h4, h5, h6, p, ul {
      margin: 0;
      padding: 0;
    }
    

    我们这里例子中用到的webpack只有单一的入口,其它的模块需要通过 import, require, url等与入口文件建立其关联,为了让webpack能找到”main.css“文件,我们把它导入”main.js “中,如下

    //main.js
    import React from 'react';
    import {render} from 'react-dom';
    import Greeter from './Greeter';
    
    import './main.css';//使用require导入css文件
    
    render(<Greeter />, document.getElementById('root'));
    

    通常情况下,css会和js打包到同一个文件中,并不会打包为一个单独的css文件,不过通过合适的配置webpack也可以把css打包为单独的文件的。

    上面的代码说明webpack是怎么把css当做模块看待的,咱们继续看一个更加真实的css模块实践。

    CSS module

    在过去的一些年里,JavaScript通过一些新的语言特性,更好的工具以及更好的实践方法(比如说模块化)发展得非常迅速。模块使得开发者把复杂的代码转化为小的,干净的,依赖声明明确的单元,配合优化工具,依赖管理和加载管理可以自动完成。

    不过前端的另外一部分,CSS发展就相对慢一些,大多的样式表却依旧巨大且充满了全局类名,维护和修改都非常困难。

    被称为CSS modules的技术意在把JS的模块化思想带入CSS中来,通过CSS模块,所有的类名,动画名默认都只作用于当前模块。Webpack对CSS模块化提供了非常好的支持,只需要在CSS loader中进行简单配置即可,然后就可以直接把CSS的类名传递到组件的代码中,这样做有效避免了全局污染。具体的代码如下

    module.exports = {
    
        ...
    
        module: {
            rules: [
                {
                    test: /(\.jsx|\.js)$/,
                    use: {
                        loader: "babel-loader"
                    },
                    exclude: /node_modules/
                },
                {
                    test: /\.css$/,
                    use: [
                        {
                            loader: "style-loader"
                        }, {
                            loader: "css-loader",
                            options: {
                                modules: true, // 指定启用css modules
                                localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
                            }
                        }
                    ]
                }
            ]
        }
    };
    

    我们在app文件夹下创建一个Greeter.css文件来进行一下测试

    /* Greeter.css */
    .root {
      background-color: #eee;
      padding: 10px;
      border: 3px solid #ccc;
    }
    

    导入.root到Greeter.js中

    import React, {Component} from 'react';
    import config from './config.json';
    import styles from './Greeter.css';//导入
    
    class Greeter extends Component{
      render() {
        return (
          <div className={styles.root}> //使用cssModule添加类名的方法
            {config.greetText}
          </div>
        );
      }
    }
    
    export default Greeter
    

    放心使用把,相同的类名也不会造成不同组件之间的污染。

    应用了css module后的样式

    CSS modules 也是一个很大的主题,有兴趣的话可以去其官方文档了解更多。

    CSS预处理器

    SassLess 之类的预处理器是对原生CSS的拓展,它们允许你使用类似于variables, nesting, mixins, inheritance等不存在于CSS中的特性来写CSS,CSS预处理器可以这些特殊类型的语句转化为浏览器可识别的CSS语句,

    你现在可能都已经熟悉了,在webpack里使用相关loaders进行配置就可以使用了,以下是常用的CSS 处理loaders:

    • Less Loader
    • Sass Loader
    • Stylus Loader

    不过其实也存在一个CSS的处理平台-PostCSS,它可以帮助你的CSS实现更多的功能,在其官方文档可了解更多相关知识。

    举例来说如何使用PostCSS,我们使用PostCSS来为CSS代码自动添加适应不同浏览器的CSS前缀。

    首先安装postcss-loaderautoprefixer(自动添加前缀的插件)

    npm install --save-dev postcss-loader autoprefixer
    

    接下来,在webpack配置文件中添加postcss-loader,在根目录新建postcss.config.js,并添加如下代码之后,重新使用npm start打包时,你写的css会自动根据Can i use里的数据添加不同前缀了。

    //webpack.config.js
    module.exports = {
        ...
        module: {
            rules: [
                {
                    test: /(\.jsx|\.js)$/,
                    use: {
                        loader: "babel-loader"
                    },
                    exclude: /node_modules/
                },
                {
                    test: /\.css$/,
                    use: [
                        {
                            loader: "style-loader"
                        }, {
                            loader: "css-loader",
                            options: {
                                modules: true
                            }
                        }, {
                            loader: "postcss-loader"
                        }
                    ]
                }
            ]
        }
    }
    
    // postcss.config.js
    module.exports = {
        plugins: [
            require('autoprefixer')
        ]
    }
    

    至此,本文已经谈论了处理JS的Babel和处理CSS的PostCSS的基本用法,它们其实也是两个单独的平台,配合webpack可以很好的发挥它们的作用。接下来介绍Webpack中另一个非常重要的功能-Plugins

    插件(Plugins)

    插件(Plugins)是用来拓展Webpack功能的,它们会在整个构建过程中生效,执行相关的任务。
    Loaders和Plugins常常被弄混,但是他们其实是完全不同的东西,可以这么来说,loaders是在打包构建过程中用来处理源文件的(JSX,Scss,Less..),一次处理一个,插件并不直接操作单个文件,它直接对整个构建过程其作用。

    Webpack有很多内置插件,同时也有很多第三方插件,可以让我们完成更加丰富的功能。

    使用插件的方法

    要使用某个插件,我们需要通过npm安装它,然后要做的就是在webpack配置中的plugins关键字部分添加该插件的一个实例(plugins是一个数组)继续上面的例子,我们添加了一个给打包后代码添加版权声明的插件

    const webpack = require('webpack');
    
    module.exports = {
    ...
        module: {
            rules: [
                {
                    test: /(\.jsx|\.js)$/,
                    use: {
                        loader: "babel-loader"
                    },
                    exclude: /node_modules/
                },
                {
                    test: /\.css$/,
                    use: [
                        {
                            loader: "style-loader"
                        }, {
                            loader: "css-loader",
                            options: {
                                modules: true
                            }
                        }, {
                            loader: "postcss-loader"
                        }
                    ]
                }
            ]
        },
        plugins: [
            new webpack.BannerPlugin('版权所有,翻版必究')
        ],
    };
    

    通过这个插件,打包后的JS文件显示如下

    版权所有,翻版必究

    这就是webpack插件的基础用法了,下面给大家推荐几个常用的插件

    HtmlWebpackPlugin

    这个插件的作用是依据一个简单的index.html模板,生成一个自动引用你打包后的JS文件的新index.html。这在每次生成的js文件名称不同时非常有用(比如添加了hash值)。

    安装

    npm install --save-dev html-webpack-plugin
    

    这个插件自动完成了我们之前手动做的一些事情,在正式使用之前需要对一直以来的项目结构做一些更改:

    1. 移除public文件夹,利用此插件,index.html文件会自动生成,此外CSS已经通过前面的操作打包到JS中了。
    2. 在app目录下,创建一个index.tmpl.html文件模板,这个模板包含title等必须元素,在编译过程中,插件会依据此模板生成最终的html页面,会自动添加所依赖的 css, js,favicon等文件,index.tmpl.html中的模板源代码如下:
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>Webpack Sample Project</title>
      </head>
      <body>
        <div id='root'>
        </div>
      </body>
    </html>
    

    3.更新webpack的配置文件,方法同上,新建一个build文件夹用来存放最终的输出文件

    const webpack = require('webpack');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
        entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
        output: {
            path: __dirname + "/build",
            filename: "bundle.js"
        },
        devtool: 'eval-source-map',
        devServer: {
            contentBase: "./public",//本地服务器所加载的页面所在的目录
            historyApiFallback: true,//不跳转
            inline: true//实时刷新
        },
        module: {
            rules: [
                {
                    test: /(\.jsx|\.js)$/,
                    use: {
                        loader: "babel-loader"
                    },
                    exclude: /node_modules/
                },
                {
                    test: /\.css$/,
                    use: [
                        {
                            loader: "style-loader"
                        }, {
                            loader: "css-loader",
                            options: {
                                modules: true
                            }
                        }, {
                            loader: "postcss-loader"
                        }
                    ]
                }
            ]
        },
        plugins: [
            new webpack.BannerPlugin('版权所有,翻版必究'),
            new HtmlWebpackPlugin({
                template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例,并传入相关的参数
            })
        ],
    };
    

    再次执行npm start你会发现,build文件夹下面生成了bundle.jsindex.html

    build文件夹

    Hot Module Replacement

    Hot Module Replacement(HMR)也是webpack里很有用的一个插件,它允许你在修改组件代码后,自动刷新实时预览修改后的效果。

    在webpack中实现HMR也很简单,只需要做两项配置

    1. 在webpack配置文件中添加HMR插件;
    2. 在Webpack Dev Server中添加“hot”参数;

    不过配置完这些后,JS模块其实还是不能自动热加载的,还需要在你的JS模块中执行一个Webpack提供的API才能实现热加载,虽然这个API不难使用,但是如果是React模块,使用我们已经熟悉的Babel可以更方便的实现功能热加载。

    整理下我们的思路,具体实现方法如下

    • Babelwebpack是独立的工具
    • 二者可以一起工作
    • 二者都可以通过插件拓展功能
    • HMR是一个webpack插件,它让你能浏览器中实时观察模块修改后的效果,但是如果你想让它工作,需要对模块进行额外的配额;
    • Babel有一个叫做react-transform-hrm的插件,可以在不对React模块进行额外的配置的前提下让HMR正常工作;

    还是继续上例来实际看看如何配置

    const webpack = require('webpack');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
        entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
        output: {
            path: __dirname + "/build",
            filename: "bundle.js"
        },
        devtool: 'eval-source-map',
        devServer: {
            contentBase: "./public",//本地服务器所加载的页面所在的目录
            historyApiFallback: true,//不跳转
            inline: true,
            hot: true
        },
        module: {
            rules: [
                {
                    test: /(\.jsx|\.js)$/,
                    use: {
                        loader: "babel-loader"
                    },
                    exclude: /node_modules/
                },
                {
                    test: /\.css$/,
                    use: [
                        {
                            loader: "style-loader"
                        }, {
                            loader: "css-loader",
                            options: {
                                modules: true
                            }
                        }, {
                            loader: "postcss-loader"
                        }
                    ]
                }
            ]
        },
        plugins: [
            new webpack.BannerPlugin('版权所有,翻版必究'),
            new HtmlWebpackPlugin({
                template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例,并传入相关的参数
            }),
            new webpack.HotModuleReplacementPlugin()//热加载插件
        ],
    };
       
    

    安装react-transform-hmr

    npm install --save-dev babel-plugin-react-transform react-transform-hmr
    

    配置Babel

    // .babelrc
    {
      "presets": ["react", "env"],
      "env": {
        "development": {
        "plugins": [["react-transform", {
           "transforms": [{
             "transform": "react-transform-hmr",
             
             "imports": ["react"],
             
             "locals": ["module"]
           }]
         }]]
        }
      }
    }
    

    现在当你使用React时,可以热加载模块了,每次保存就能在浏览器上看到更新内容。

    产品阶段的构建

    目前为止,我们已经使用webpack构建了一个完整的开发环境。但是在产品阶段,可能还需要对打包的文件进行额外的处理,比如说优化,压缩,缓存以及分离CSS和JS。

    对于复杂的项目来说,需要复杂的配置,这时候分解配置文件为多个小的文件可以使得事情井井有条,以上面的例子来说,我们创建一个webpack.production.config.js的文件,在里面加上基本的配置,它和原始的webpack.config.js很像,如下

    // webpack.production.config.js
    const webpack = require('webpack');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
        entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件
        output: {
            path: __dirname + "/build",
            filename: "bundle.js"
        },
        devtool: 'null', //注意修改了这里,这能大大压缩我们的打包代码
        devServer: {
            contentBase: "./public", //本地服务器所加载的页面所在的目录
            historyApiFallback: true, //不跳转
            inline: true,
            hot: true
        },
        module: {
            rules: [{
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            }, {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: [{
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }],
                })
            }]
        },
        plugins: [
            new webpack.BannerPlugin('版权所有,翻版必究'),
            new HtmlWebpackPlugin({
                template: __dirname + "/app/index.tmpl.html" //new 一个这个插件的实例,并传入相关的参数
            }),
            new webpack.HotModuleReplacementPlugin() //热加载插件
        ],
    };
    
    //package.json
    {
      "name": "test",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "webpack",
        "server": "webpack-dev-server --open",
        "build": "NODE_ENV=production webpack --config ./webpack.production.config.js --progress"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
    ...
      },
      "dependencies": {
        "react": "^15.6.1",
        "react-dom": "^15.6.1"
      }
    }
    

    注意:如果是window电脑,build需要配置为"build": "set NODE_ENV=production && webpack --config ./webpack.production.config.js --progress".谢谢评论区简友提醒。

    优化插件

    webpack提供了一些在发布阶段非常有用的优化插件,它们大多来自于webpack社区,可以通过npm安装,通过以下插件可以完成产品发布阶段所需的功能

    • OccurenceOrderPlugin :为组件分配ID,通过这个插件webpack可以分析和优先考虑使用最多的模块,并为它们分配最小的ID
    • UglifyJsPlugin:压缩JS代码;
    • ExtractTextPlugin:分离CSS和JS文件

    我们继续用例子来看看如何添加它们,OccurenceOrder 和 UglifyJS plugins 都是内置插件,你需要做的只是安装其它非内置插件

    npm install --save-dev extract-text-webpack-plugin
    

    在配置文件的plugins后引用它们

    // webpack.production.config.js
    const webpack = require('webpack');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const ExtractTextPlugin = require('extract-text-webpack-plugin');
    
    module.exports = {
        entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
        output: {
            path: __dirname + "/build",
            filename: "bundle.js"
        },
        devtool: 'none',
        devServer: {
            contentBase: "./public",//本地服务器所加载的页面所在的目录
            historyApiFallback: true,//不跳转
            inline: true,
            hot: true
        },
        module: {
            rules: [
                {
                    test: /(\.jsx|\.js)$/,
                    use: {
                        loader: "babel-loader"
                    },
                    exclude: /node_modules/
                },
                {
                    test: /\.css$/,
                    use: [
                        {
                            loader: "style-loader"
                        }, {
                            loader: "css-loader",
                            options: {
                                modules: true
                            }
                        }, {
                            loader: "postcss-loader"
                        }
                    ]
                }
            ]
        },
        plugins: [
            new webpack.BannerPlugin('版权所有,翻版必究'),
            new HtmlWebpackPlugin({
                template: __dirname + "/app/index.tmpl.html"
            }),
            new webpack.optimize.OccurrenceOrderPlugin(),
            new webpack.optimize.UglifyJsPlugin(),
            new ExtractTextPlugin("style.css")
        ],
    };
    

    此时执行npm run build可以看见代码是被压缩后的

    压缩后的代码

    缓存

    缓存无处不在,使用缓存的最好方法是保证你的文件名和文件内容是匹配的(内容改变,名称相应改变)

    webpack可以把一个哈希值添加到打包的文件名中,使用方法如下,添加特殊的字符串混合体([name], [id] and [hash])到输出文件名前

    const webpack = require('webpack');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const ExtractTextPlugin = require('extract-text-webpack-plugin');
    
    module.exports = {
    ..
        output: {
            path: __dirname + "/build",
            filename: "bundle-[hash].js"
        },
       ...
    };
    

    现在用户会有合理的缓存了。

    带hash值的js名

    去除build文件中的残余文件

    添加了hash之后,会导致改变文件内容后重新打包时,文件名不同而内容越来越多,因此这里介绍另外一个很好用的插件clean-webpack-plugin

    安装
    cnpm install clean-webpack-plugin --save-dev

    使用

    引入clean-webpack-plugin插件后在配置文件的plugins中做相应配置即可:

    const CleanWebpackPlugin = require("clean-webpack-plugin");
      plugins: [
        ...// 这里是之前配置的其它各种插件
        new CleanWebpackPlugin('build/*.*', {
          root: __dirname,
          verbose: true,
          dry: false
      })
      ]
    

    关于clean-webpack-plugin的详细使用可参考这里

    总结

    其实这是一年前的文章了,趁周末重新运行和修改了一下,现在所有的代码都可以正常运行,所用webpack基于最新的webpack3.5.3。希望依旧能对你有帮助。

    这是一篇好长的文章,谢谢你的耐心,能仔细看到了这里,大概半个月前我第一次自己一步步配置项目所需的Webpack后就一直想写一篇笔记做总结,几次动笔都不能让自己满意,总觉得写不清楚。其实关于Webpack本文讲述得仍不完全,不过相信你看完后已经进入Webpack的大门,能够更好的探索其它的关于Webpack的知识了。

    欢迎大家在文后发表自己的观点讨论。

    更新说明

    2017-12-11更新,修改css module部分代码及示例图片,css module真的非常好用,希望大家都能用上。

    2017年9月18日更新,添加了一个使用webpack配置多页应用的demo,可以点击此处查看

    2017年8月13日更新,本文依据webpack3.5.3将文章涉及代码完全重写,所有代码都在Mac上正常运行过。希望依旧对你学习webpack有帮助。

    2017年8月16号更新:
    最近在Gitchat上将发起了一场关于webpack的分享,目的在于一起花最短的时间理解和学会webpack,感兴趣的童鞋可以微信扫描注册哈。


    webpack从入门到工程实践

    相关文章

      网友评论

      • 小糖糖_:到HtmlWebpackPlugin这一步,为啥我build文件夹下面没有生成文件
      • 小糖糖_:写了webpack app/main.js public/bundle.js这句后提示安装webpack-cli点安装后,却安装失败,就没有走到下面,这是为啥
        小糖糖_:我全局安装后就可以了
      • Oo莫莫oO:我在入口函数main.js里放了一个类
        class Person{
        static info = {
        name: 'dd',
        age: 20
        }
        }
        2、安装了相应的Loader
        cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
        cnpm i babel-preset-env babel-preset-stage-0 -D
        3、在webpack.config.js里配置了module的rules

        module: {//配置所有第三方Loader模块的
        rules: [//第三方匹配规则
        { test: /\.css$/, use: ['style-loader','css-loader'] },//处理css文件的loader
        { test: /\.less$/, use: ['style-loader','css-loader','less-loader'] },//处理less文件的loader
        { test: /\.scss$/, use: ['style-loader','css-loader','sass-loader'] },//处理scss文件的loader
        { test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader?limit=244&name=[hash:8]-[name].[ext]' },
        //处理scss文件的loader,limit是限制图片大小。如果图片大小大于或等于limit,不转为base64
        { test: /\.(ttf|eot|svg|woff|woff2)$/, use:'url-loader'}, //这是处理字体文件的配置
        {
        //cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
        //cnpm i babel-preset-env babel-preset-stage-0 -D
        test: /(\.jsx|\.js)$/,
        use: {
        loader: "babel-loader"
        },
        exclude: /node_modules/
        }//这是配置babel,来转换高级ES6语法
        ]
        }

        运行npm run dev,提示错误
        ERROR in ./src/main.js
        Module build failed (from ./node_modules/_babel-loader@8.0.4@babel-loader/lib/index.js):
        Error: Plugin/Preset files are not allowed to export objects, only functions. In D:\00 projects\day6\01.webpack-study\node_modules\babel-preset-stage-0\lib\index.js

        这是什么原因?
      • d544e1b22686:多谢分享。
      • 977a3f953b6f:我的环境是webpack4 有些内容需要修改,需要单独安装 mini-css-extract-plugin(代替extract-text-webpack-plugin), uglifyjs-webpack-plugin,配置修改为:
        //webpack.production.confg.js
        ...
        const MiniCssExtractPlugin = require("mini-css-extract-plugin");
        const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
        ...

        module.exports = {
        module: {
        rules: [
        {
        test: /(\.jsx|\.js)$/,
        use: {
        loader: "babel-loader"
        },
        exclude: /node_modules/
        },
        {
        test: /\.css$/,
        use: [
        {
        loader: "style-loader"
        }, {
        loader: MiniCssExtractPlugin.loader,
        options: {
        // you can specify a publicPath here
        // by default it use publicPath in webpackOptions.output
        publicPath: './build'
        }
        }
        ...
        ]
        }
        ]
        },
        plugins: [
        ...
        new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        filename: "[name].css",
        chunkFilename: "[id].css"
        })
        ],
        optimization: {
        minimizer: [new UglifyJsPlugin()]
        }
        };
      • 977a3f953b6f:安装babel因为版本原因 需要按照官方github的这个方式安装npm install -D babel-loader@7 babel-core babel-preset-env
        小糖糖_:我也碰到这个问题,按你的安装就没报错了:+1:
      • 22d6058fa024:在window下,全局安装后,webpack命令执行不了,会提示“ 安装后提示CLI”,
        The CLI moved into a separate package: webpack-cli
        Would you like to install webpack-cli? (That will run npm install -D webpack-cli) (yes/NO)NO
        It needs to be installed alongside webpack to use the CLI
        但输入“yes"后,也会安装不成功,因为webpack是全局安装,所以webpack-cli也要全局安装,如下:
        npm install --save-dev webpack-cli -g
      • leejunhui:看到目前最清晰明了的入门文章了,赞赏了2元,支持作者
      • 81f30db99262:从头跟到尾,谢谢楼主:blush:
      • 蜗牛_Cy:有没有和我一样不能加载png图片的,只要打包图片都有问题。
        礼就是规矩:把版本自己降低一下; 看终端的安装warn 警告提示
      • 做笔记的地方:深度好文~
      • 50381ada7726:webpack app/main.js public/bundle.js,第一步那就显示webpack未找到命令
        55dd9d79d87c:@凡谷调试员 是mac么、开了文件的权限么
        50381ada7726:Error: No dist in undefined package
        这个怎么解决啊,有大神路过吗
        50381ada7726:按照那个步骤下来没有node_modules这个目录,只有一个npm-debug.log文件
      • 匿名类:写的不错 : )
      • 匿名类:写的不错 .
      • a7196a32a717:按照您的步骤构建本地服务器每次都报错,不知道什么原因
      • 01f36b151eeb:提个小的提醒哈,产品阶段的构建这块的webpack.production.config.js代码里,没有引入ExtractTextPlugin就使用了,会报错。下面优化插件的配置文件里引入了ExtractTextPlugin,但是module的css规则里没有使用,只在plugin里加入了ExtractTextPlugin,使得最后build没有分离出css文件来。需要两者配合使用才可以得到分离的css文件呀~望采纳~
      • 0e2c0e326d84:node_modules不是内部或外部命令,是怎么回事
        0e2c0e326d84:@沉小安 嗯,谢谢,我后来就是安装了全局的,没有用局部了
        沉小安:你好,在windows下用我上面的说明的格式之后,还是报错,报的另外一个的错误(无法加载 public/bundle.js),一直无法生成文件 bundle.js,解决办法是楼下有个大佬说的 @wMeSlAx767,输出时需要加-o(小写字母o),完整的为:webpack app/main.js -o public/bundle.js,运行后成功执行~
        沉小安:我遇到了跟你一样的问题,windows下,在项目的根路径执行node_modules/.bin/webpack app/main.js public/bundle.js就会报这个node_modules不是命令的错误(我猜是因为windows不跟linux一样,无法跨目录执行命令,比如这里的命令“webpack”并不在本目录下)。所以我的解决办法是全局安装webpack,然后直接webpack app/main.js public/bundle.js.
      • 马建阳:在HtmlWebpackPlugin那步把plugins打成了plugin报错,弄了好久解决,不知道有没有人跟我一样。。。
      • aeffe2167870:我在文章里插件 HtmlWebpackPlugin 这里卡住了,按照文章里写的,npm start的时候报错了,未能通过index.tmpl.html生成index.html.有知道的大神指导一下吗?
        aeffe2167870:已解决,路径写错了,app前面要加/
      • 43b69d821ad6:点赞点赞,专门注册来点赞
      • b712a1156d37:在终端运行的那一步,为什么一直不能运行,bundle.js里面的内容是啥
        8b04797cdda6:需要安装webpack-cli
        npm install webpack webpack-cli --save-dev
      • 留白_汉服vs插画:报错:webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
        楼上有,哈哈哈。他的正确的。然后修改后,依然报错如下

        webpack使用extract-text-webpack-plugin打包时提示错误 :Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead。

        分析:extract-text-webpack-plugin还不能支持webpack4.0.0以上的版本。

        解决:先,npm install --save-dev extract-text-webpack-plugin@next 然后再打包,就正常了。

        这时候看到的打包文件就正常了。
        留白_汉服vs插画:@马建阳 应该是安装下一个版本的意思吧
        马建阳:extract-text-webpack-plugin@next 这里的@next是什么意思,之前的版本吗?
        留白_汉服vs插画:完全跑完了,虽然各种bug(大部分是我搞错了)但是感觉从头跑到尾,通了就很开心。哈哈哈哈
      • 浊酒清茶调素琴:感谢作者,写的太好了!运行时遇到此错误
        webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.

        关于js压缩插件UglifyJsPlugin在webpack4+已经被删除了!
        可用解决方法:
        npm install --save-dev uglifyjs-webpack-plugin;

        然后配置webpack.production.config.js的文件

        const UglifyJsPlugin=require('uglifyjs-webpack-plugin');

        plugins: [
        .....原本配置,
        删除JS压缩new webpack.optimize.UglifyJsPlugin()
        ],
        optimization: {
        minimizer: [
        new UglifyJsPlugin({
        uglifyOptions: {
        compress: false
        }
        })
        ]
        },
        小糖糖_:你们怎么都如此优秀
      • 留白_汉服vs插画:npm install --save-dev webpack 是不是执行了两遍呢
      • 712fac72469d:我也是专门登录点赞的:joy:
      • 5dd292e241d9:非常感谢作者的文章,作为入门确实已经够了。谢谢!
      • 6867403e328c:下午看了一遍,写的很好,虽说已经webpack4了,但核心的东西还是一样的。谢谢!
      • 793417a2af02:走完了整个一遍流程,对Webpack有了个从零到一的认识,感谢作者小伙伴,专门登录简书只为给作者点个大大的赞!:+1: :+1: :+1:
        7091a52ac9e5:@追赶 谢谢:smiley:不过是基于三点几版写的,可能有点过时了
      • 前端伊始:在调用此命令$webpack {entry file} {destination for bundled file}时,报错Module not found: Error: Can't resolve 'bundle.js' in 。。。
        后来在Stack Overflow上找到答案:$webpack {entry file} -o {destination for bundled file}
        小糖糖_:优秀
      • 3096323bf10e:写的太好了 为了给你评论专门注册的简书:joy:
        我原来做java后端的,前端只知道html、css。现在想自己用elementui、iview做个东西,但是把他们的demo直接放到html里面是个空白啥也不显示,后来跟同事大听知道了webpack。然后百度,然后看到你的文章。完全能看懂啊,写的太好了。
      • wMeSlAx767:在最新的webpack版本中`node_modules/.bin/webpack app/main.js public/bundle.js` 指定输出文件时需要使用 -o
        沉小安:对!原来如此!windows就是坑,谢谢你~
      • e55325f42b29:写得蛮详细,4.x出来后有些又有问题了。UglifyJsPlugin不再内置,删了,现在压缩的话只需要添加配置项optimization.minimize = true;ExtractTextPlugin插件无效的原因是需要在rule哪里修改配置
        ```
        use: ExtractTextPlugin.extract({
        use: [
        {
        loader: 'css-loader',
        options: {
        module: true,
        localIdentName: '[name]__[local]--[hash:base64:5]', // 指定css的类名格式
        sourceMap: true,
        minimize: true,
        },
        },
        {
        loader: 'postcss-loader',
        options: {
        sourceMap: true,
        },
        },
        ],
        fallback: 'style-loader',
        }),
        ```
        e55325f42b29:简书竟然不支持md?
      • 一里山:十分感谢作者的分享,条理清晰,思路明确!
      • Forhongchun:按照你的方法安装webpack,打包bundle.js时报错,
        ERROR in multi ./app/main.js public/bundle.js
        Module not found: Error: Can't resolve 'public/bundle.js' in 'D:\vue\wp'
        @ multi ./app/main.js public/bundle.js
        977a3f953b6f:@放气了的仓鼠 谢谢
        01f36b151eeb:webpack4的这里有变化,webpack后面接的是要打包的文件,对于输出文件和输出路径要额外加参数。报错是因为它把public/bundle.js当做是要打包的文件了,所以提示找不到该文件。你把这个文件去掉,再执行webpack ./app/main.js的时候,就会默认打包到一个dist文件。
        想输出到public文件夹下,并命名文件为bundle.js,需要执行webpack app/main.js --output-filename bundle.js --output-path public --mode production。
        f2965a3cfdb3:这个问题我也遇到了,不过我看着文章继续创建了webpack.config.js 文件以后,再在终端执行npm start 就可以成功编译了
      • 52d1e04fa6f5:谢谢好文:+1: :+1:
      • 0f1c45cf4f3f:webpack入门学习了,非常感谢
      • d2fe0c8ad6f6:HtmlWebpackPlugin插件之后的,如果我没看错的话,devServer.contentBase 应该是 './build':yum:
        d2fe0c8ad6f6:但是在github源码上面是正确的,应该是遗漏了
      • 多多__指教:请问一下报错怎么解决?
        webpack 4.6.0
        执行 node_modules/.bin/webpack app/main.js public/bundle.j
        s --mode development
        报错
        ERROR in multi ./app/main.js public/bundle.js
        Module not found: Error: Can't resolve 'public/bundle.js' in 'C:\xampp\htdocs\Webpack'
        @ multi ./app/main.js public/bundle.js
        多多__指教:@今年23了 不好意思,这个问题我都忘了,看了一下记录,还是没解决呢,当时接着往下看了
        f2965a3cfdb3:请问你是不是也是在终端执行webpack app/main.js public/bundle.js 的时候报的错,再继续创建webpack.config.js文件之后,再在package.json文件添加了"start": "webpack"配置后,就可以成功编译通过了,成功生成bundle.js。
      • panning:写的太好了,看了受益匪浅:+1:
      • 8b5c8dcb1c8a:楼主大神,有个问请教下您,实现热加载的时候,我的控制台是可以自动compiling的,但是浏览器上怎么没跟着变化呢?就算是浏览器刷新也不管用呢 @zhangwang
      • 6878133e6f44:感谢感谢感谢,不过按照代码敲的时候也遇到了一些问题,目前还没找到原因~一会再从头到尾试一遍
      • 风吹而散:过瘾 好文 看完好多都懂了。
      • hd_hd:非常感谢!
        但是在webpack4之后的版本上,有一些问题:

        1、webpack-cli在webpack4之后需要单独安装
        npm install -g webpack-cli
        不然会一直报错。

        2、使用webpack打包得到 bundle.js 需要添加--output-filename和--output-path才行
        webpack app/main.js --output-filename bundle.js --output-path public/ --mode development
        hd_hd:@植乃物 可以可以
        6878133e6f44:我也遇到同样的问题,按照你说的解决了~
      • 宁夏灼雪__:不知为何 webpack {entry file} {destination for bundled file} entry file 写 main的路径, destination 随便写一个目录路径,各种报错, Module not found: Error: Can't resolve
        宁夏灼雪__:当前项目目录下 webpack ./app/main.js ./assets/ 这样?
      • bdc15307d438:请教个问题,我的npm init,报这个错,是什么问题?
        Error: EPERM: operation not permitted, mkdir 'C:\Program Files\nodejs'
        TypeError: Cannot read property 'get' of undefined
      • bdc15307d438:谢谢作者的分享,收益良多!
      • 833360ed610f:入门好文
      • 酪蕊璺:https://www.jianshu.com/p/4320b1a3e3cf 根据webpack@4改了一下 希望对大家有帮助
      • 80aa4f77c88a:现在4.0版本开始以后.. 好像不太适用了... 问下大大什么时候更新一下。 按这篇文章熟悉以前的版本的话,应该用哪个版本的webpack-dev-server依赖呢
        80aa4f77c88a:如果可以提供一下 核心依赖的版本号就好了.. 我想大多数人报错也因为这个原因....
      • 呦呦烈鸟:错误太多,放弃了~
      • 金金刚狼:真不错
      • 李伟_Li慢慢:感谢,已赞赏支持。
      • 590b15bca35a:老是报这个错误,感到无语
        'node_modules' 不是内部或外部命令,也不是可运行的程序
      • ce7e690a45df:我在"正式使用webpack"这个地方遇到问题,按你的步骤做到这里,在控制台输入webpack app/main.js public/bundle.js命令后会报错ERROR in multi ./app/main.js public/bundle.js
        Module not found: Error: Can't resolve 'public/bundle.js' in 'E:\webpack_sample_project'
      • 24d075f1593c:真心感谢好文,作者大大,在操作过程中遇到了问题,能帮忙看下嘛?
        这是我的webpack配置:
        {
        test: /\.css$/,
        use: [
        {
        loader: "style-loader"
        }, {
        loader: "css-loader"
        }
        ]
        },
        编译时会出现这个错误:
        ERROR in ./app/main.css
        Module parse failed: Unexpected token (1:5)
        You may need an appropriate loader to handle this file type.
        | body {
        | color: aquamarine;
        | }
        @ ./app/main.js 13:0-21
        @ multi (webpack)-dev-server/client?http://localhost:8080 ./app/main.js

        我感觉style-loader和css-loader并没有成功的加载。
        24d075f1593c:翻了一遍评论已经解决,重启下server就好了...虽然不知道为什么
      • 呦呦烈鸟:大家学习的时候一定要注意各种依赖包的版本呀 。。。
      • 鬼颜兮:深度好文
      • 怀王:所有代码运行出错的同学,把webpack版本切换至3.5.3
      • a2bc73feda2d:webpack小白一枚,一路坎坷走下来,到压缩那一步显式webpack.optimize.UglifyJsPlugin已被删除,请改用config.optimization.minimize。百度上找不到答案,求大神教教我。
        > webpack-module@1.0.0 build D:\webpack-module
        > set NODE_ENV=production && webpack --config ./webpack.production.config.js --progress

        D:\webpack-module\node_modules\webpack-cli\bin\webpack.js:237
        throw err;
        ^

        Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
        npm ERR! code ELIFECYCLE
        npm ERR! errno 1
        npm ERR! webpack-module@1.0.0 build: `set NODE_ENV=production && webpack --config ./webpack.production.config.js --progress`
        npm ERR! Exit status 1
        npm ERR!
        npm ERR! Failed at the webpack-module@1.0.0 build script.
        npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
        a2bc73feda2d:压缩后还有90kb:sweat:
        a2bc73feda2d:自己解决了,少了什么就装什么。
      • 7e56f2b559e1:+ html-webpack-plugin@3.0.3
        added 116 packages and updated 1 package in 23.953s

        D:\webpack_test\webpack.config.js:52
        plugins : [new webpack.BannerPlugin('版权所有,翻版必究'), new HtmlWebpackPl
        ugin({
        ^

        ReferenceError: HtmlWebpackPlugin is not defined
        at Object.<anonymous> (D:webpack_test\webpack.config.js
        :52:59)
        at Module._compile (module.js:573:30)
        at Object.Module._extensions..js (module.js:584:10)
        at Module.load (module.js:507:32)
        at tryModuleLoad (module.js:470:12)
        at Function.Module._load (module.js:462:3)
        at Module.require (module.js:517:17)
        at require (internal/module.js:11:18)
        at requireConfig (C:\Users\Administrator\AppData\Roaming\npm\node_modules\we
        bpack\bin\convert-argv.js:97:18)
        at C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack\bin\conve
        rt-argv.js:104:17 求助啊 为什么安装了这个插件后 使用还报错啊
        7e56f2b559e1:var HtmlWebpackPlugin = require('html-webpack-plugin'); 解决啦:smiley:
      • 8e65d9bd1e1a:webpack官方文档:注意,当在 windows 中通过调用路径去调用 webpack 时,必须使用反斜线()。例如 node_modules\.bin\webpack --config webpack.config.js。
      • 2d16d2f9313a:为什么我的一直报的错是这个啊?哪位大神能给解答一下
        The CLI moved into a separate package: webpack-cli.
        Please install 'webpack-cli' in addition to webpack itself to use the CLI.
        -> When using npm: npm install webpack-cli -D
        -> When using yarn: yarn add webpack-cli -D
        2d16d2f9313a:@zhangwang 是4.0.1,上述问题已经解决了,但是又出现了新的,能帮我看下吗?
        PS C:\Users\Think\Desktop\web\practice\mypackge0> webpack
        C:\node_modules\webpack-cli\bin\webpack.js:237
        throw err;
        ^

        Error: Cannot find module 'webpack'
        at Function.Module._resolveFilename (module.js:538:15)
        at Function.Module._load (module.js:468:25)
        at Module.require (module.js:587:17)
        at require (C:\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
        at Object.<anonymous> (C:\node_modules\webpack-cli\bin\convert-argv.js:7:24)
        at Module._compile (C:\node_modules\v8-compile-cache\v8-compile-cache.js:178:30)
        at Object.Module._extensions..js (module.js:654:10)
        at Module.load (module.js:556:32)
        at tryModuleLoad (module.js:499:12)
        at Function.Module._load (module.js:491:3)
        at Module.require (module.js:587:17)
        at require (internal/module.js:11:18)
        at yargs.parse (C:\node_modules\webpack-cli\bin\webpack.js:234:14)
        at Object.parse (C:\node_modules\yargs\yargs.js:539:18)
        at C:\node_modules\webpack-cli\bin\webpack.js:212:8
        at Object.<anonymous> (C:\node_modules\webpack-cli\bin\webpack.js:504:3)
        at Module._compile (module.js:643:30)
        at Object.Module._extensions..js (module.js:654:10)
        at Module.load (module.js:556:32)
        at tryModuleLoad (module.js:499:12)
        at Function.Module._load (module.js:491:3)
        at Module.require (module.js:587:17)
        at require (internal/module.js:11:18)
        at Object.<anonymous> (C:\Users\Think\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js:12:2)
        at Module._compile (module.js:643:30)
        at Object.Module._extensions..js (module.js:654:10)
        at Module.load (module.js:556:32)
        at tryModuleLoad (module.js:499:12)
        at Function.Module._load (module.js:491:3)
        at Function.Module.runMain (module.js:684:10)
        7091a52ac9e5:@再一次远航 其实报错信息已经说得很清楚该怎么做了。不过这是webpack4么
      • 晒德乌漆麻黑:请问这个问题怎么解决:
        PS D:\MyStudys\webpack_test> node_modules/.bin/webpack app/main.js public/bundle.js
        The CLI moved into a separate package: webpack-cli.
        Please install 'webpack-cli' in addition to webpack itself to use the CLI.
        -> When using npm: npm install webpack-cli -D
        -> When using yarn: yarn add webpack-cli -D
        PS D:\MyStudys\webpack_test>
        a2bc73feda2d:好像和我遇到的问题一样,我当时应该是全局安装了cli就好了
        7091a52ac9e5:@晒德乌漆麻黑 你安装的是webpack4么,还没有研究过4
      • 希尔_4cbd:webpack 需要安装webpack-cli么?
      • 巨应君:优化插件 这一段后面的代码错了。编译不出来css文件对萌新有干扰。
        缺少了这一句 use: ExtractTextPlugin.extract(
      • 风间澈618:博主,我看到好多评论是在npm run server 那里出错了,我的也是,报错是 Cannot find module 'webpack', 这个怎么办啊,
        风间澈618:@王海洋有棵树 当时真是蒙圈,后面就没进行下去了
        留白_汉服vs插画:应该是少写了一句require ,就是文件的顶部那句,复制掉了
        7091a52ac9e5:@风间澈618 这个应该就是webpack 没有正确安装。
      • d4bb736cd785:十分感谢,逻辑清晰,自己实践后有很多收获。
        还想请教您个问题,关于“ExtractTextPlugin:分离CSS和JS文件” 这一部分,这个分离指的是打包后会有一个bundle.js文件以及一个css文件吗? 我按照您的代码实践,发现只有一个bundle.js文件呢? 这里的分离指的是什么呢?请指教,十分感谢!!!
        7091a52ac9e5:@锦尺 应该是有一个单独的css文件的。
      • 2c6a2ffb28eb:不错,学习了
      • 自律财富自由:楼主,我代码压缩那里配置了,也运行成功了,为什么没有看到压缩的代码呢?是看哪个文件???
        自律财富自由:@zhangwang 我是后来加上了hash值之后,bundle.js才是压缩的。
        7091a52ac9e5:@鄢栋 没有记错的话 应该依旧是在打包的代码文件夹中。dist 或者 build?
      • 如果心情是音乐:http://t.cn/R8FEpI2 免费领取阿里云幸运券。
      • 609306cc6f35:深度好文,感谢楼主🙏!!! 提个小小的改进,rules检验文件名的时候的正则这么写 test: /\.jsx?$/,能简单一点点
      • 阿川阿川:你好,我一直报这个错,不知道怎么解决,这个报错是在:‘2017年9月18日更新,添加了一个使用webpack配置多页应用的demo,可以点击此处查看’。这个demo里面cnpm i 的时候。

        MSBUILD : error MSB3428: 未能加载 Visual C++ 组件“VCBuild.exe”。要解决此问题,1) 安装 .NET Framework 2.0 SDK;2) 安装 Microsoft Visual Stu
        dio 2005;或 3) 如果将该组件安装到了其他位置,请将其位置添加到系统路径中。 [D:\web\foremost\blogs\blogs\sources\MultiPageWebpackDemos\node_modules\_in
        teger@1.0.3@integer\build\binding.sln]
      • 任嘉平生愿:文章确实不错,非常的好,因为最近在看关于react-ant design 的项目头皮发麻,看到你的文章瞬间开心了许多,对于这个简书APP 也产生了好感!
      • Jaween:在导入样式表的那一步,报错:
        Uncaught Error: Module parse failed: Unexpected token (1:0)
        You may need an appropriate loader to handle this file type.
        我把css文件上的东西删了,就没问题,css文件一写东西就会报错,是我哪里配置错了吗?唉一直卡在这里
        24d075f1593c:太感谢了!在这卡了一上午。
        Jaween:@南ke一梦 谢谢了,昨天一直卡在这里,今天看你的回复,真是泪流满脸,哈哈
        4cba15fab5e9:我也遇到了这种错误,把运行 npm run server 的终端关闭再重启就可以了
      • a234d1bf8868:大虾,开头处有误,应该是 babel-preset-env。嘿嘿嘿。
      • 神秘博士doctor:已经赞赏
      • 4ed6604531c5:(http://webpack.wuhaolin.cn)《深入浅出 Webpack》 是国内第一本系统全面讲解 Webpack 的图书,涵盖了 Webpack 的入门、配置、实战、优化、原理。
      • 凋零美:为什么用http-webpack-plugin 这个插件生成的JS和HTML在build文件夹,但是devServer里配置的的contentBase 还是 public 一样能正常显示呢?服务器加载的页面不在public里啊
      • 凋零美:我在文章里插件 HtmlWebpackPlugin 这里卡住了,按照文章里写的,npm start的时候报错了,而且我看到output: path: __dirname + "/build" 和 server里的 devServer: contentBase: './public' public 文件夹不是说移出吗?

        不过我改成 build 也没用,一样出错
        aeffe2167870:哥们你解决了吗?我也卡在这里
      • e2f11fd62dd4:写的灰常好啊,初学者的福音
      • a97059eefe45:为什么npm run server 就这样了
        Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
        - configuration.module.rules[0] has an unknown property 'text'. These properties are valid:
        object { enforce?, exclude?, include?, issuer?, loader?, loaders?, oneOf?, options?, parser?, query?, resource?, resourceQuery?, compiler?, rules?, test?, use? }
        -> A rule
        ode ELIFECYCLE
        npm ERR! errno 1
        npm ERR! my-webpack@1.0.0 server: `webpack-dev-server --open`
        npm ERR! Exit status 1
        npm ERR!
        npm ERR! Failed at the my-webpack@1.0.0 server script.
        npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

        npm ERR! A complete log of this run can be found in:
        npm ERR! C:\Users\wt910\AppData\Roaming\npm-cache\_logs\2018-01-17T00_59_03_973Z-debug.log 是什么原因呢。
      • 0c0d31651d82:非常感谢作者的整理,写得非常好。这里我有一个小问题,在用这个插件的时候一直报cannot find module debug,我很懵。
      • 孙_:很赞,博主辛苦了
      • 萱苏m:太赞了,终于全部跑完了,中间各种出问题,总算一一解决,有的问题也不知道是为啥,折腾折腾就解决,有的问题的解决就了解到了新知识,谢谢楼主,跟着楼主的文章做完一遍,瞬间觉得webpack以及好多人家的项目不那么陌生了,后面的路还长,继续努力
      • 萱苏m:两个问题,1、react热启动那块是不是少写了个安装react-hot-loader;
        2、请问一下,为什么我的webpack-dev-server在按ctrl+c退出后并没有退出进程,需要去任务管理器结束node.exe进程才可以。
      • ab3855e9d135:在优化插件这里 npm run build 就报错.....
        npm run build

        > webpack@1.0.0 build E:\sirbin\1\webpack
        > set NODE_ENV=production && webpack --progress --colors --config webpack.production.config.js

        E:\sirbin\1\webpack\webpack.production.config.js:27
        use: ExtractTextPlugin.extract({
        ^

        ReferenceError: ExtractTextPlugin is not defined
        at Object.<anonymous> (E:\sirbin\1\webpack\webpack.production.config.js:27:18)
        at Module._compile (module.js:635:30)
        at Object.Module._extensions..js (module.js:646:10)
        at Module.load (module.js:554:32)
        at tryModuleLoad (module.js:497:12)
        at Function.Module._load (module.js:489:3)
        at Module.require (module.js:579:17)
        at require (internal/module.js:11:18)
        at requireConfig (E:\sirbin\1\webpack\node_modules\_webpack@3.10.0@webpack\bin\convert-argv.js:97:18)
        at E:\sirbin\1\webpack\node_modules\_webpack@3.10.0@webpack\bin\convert-argv.js:104:17
        at Array.forEach (<anonymous>)
        at module.exports (E:\sirbin\1\webpack\node_modules\_webpack@3.10.0@webpack\bin\convert-argv.js:102:15)
        at yargs.parse (E:\sirbin\1\webpack\node_modules\_webpack@3.10.0@webpack\bin\webpack.js:171:41)
        at Object.Yargs.self.parse (E:\sirbin\1\webpack\node_modules\_yargs@8.0.2@yargs\yargs.js:533:18)
        at Object.<anonymous> (E:\sirbin\1\webpack\node_modules\_webpack@3.10.0@webpack\bin\webpack.js:152:7)
        at Module._compile (module.js:635:30)
        npm ERR! code ELIFECYCLE
        npm ERR! errno 1
        npm ERR! webpack@1.0.0 build: `set NODE_ENV=production && webpack --progress --colors --config webpack.production.config.js`
        npm ERR! Exit status 1
        npm ERR!
        npm ERR! Failed at the webpack@1.0.0 build script.
        npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

        npm ERR! A complete log of this run can be found in:
        npm ERR! C:\Users\YH\AppData\Roaming\npm-cache\_logs\2018-01-11T08_49_04_666Z-debug.log
        这是怎么回事?
      • ab3855e9d135:在引入插件的时候,怎么就报错了
        ndex.html 244 bytes [emitted]
        [0] ./app/main.js 258 bytes {0} [built] [failed] [1 error]

        ERROR in ./app/main.js
        Module build failed: SyntaxError: E:/sirbin/1/webpack/app/main.js: Unexpected token (6:7)

        4 | import Greeter from './Greeter';
        5 | import './main.css';
        > 6 | render(<Greeter />, document.getElementById('root'));
        | ^

        Child html-webpack-plugin for "index.html":
        1 asset
        [0] ./node_modules/_html-webpack-plugin@2.30.1@html-webpack-plugin/lib/loader.js!./app/index.tmpl.html 581 bytes {0} [built]
        [2] (webpack)/buildin/global.js 509 bytes {0} [built]
        [3] (webpack)/buildin/module.js 517 bytes {0} [built]
        + 1 hidden module
        npm ERR! code ELIFECYCLE
        npm ERR! errno 2
        npm ERR! webpack@1.0.0 start: `webpack`
        npm ERR! Exit status 2
        npm ERR!
        npm ERR! Failed at the webpack@1.0.0 start script.
        npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

        npm ERR! A complete log of this run can be found in:
        npm ERR! C:\Users\YH\AppData\Roaming\npm-cache\_logs\2018-01-11T06_51_02_576Z-debug.log
      • 萱苏m:$ npm run server

        > webpack@1.0.0 server D:\web\webpack
        > webpack-dev-server --open

        events.js:182
        throw er; // Unhandled 'error' event
        ^

        Error: listen EADDRINUSE 127.0.0.1:8080
        at Object.exports._errnoException (util.js:1022:11)
        at exports._exceptionWithHostPort (util.js:1045:20)
        at Server.setupListenHandle [as _listen2] (net.js:1315:14)
        at listenInCluster (net.js:1363:12)
        at GetAddrInfoReqWrap.doListen [as callback] (net.js:1489:7)
        at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:96:10)
        npm ERR! code ELIFECYCLE
        npm ERR! errno 1
        npm ERR! webpack@1.0.0 server: `webpack-dev-server --open`
        npm ERR! Exit status 1
        npm ERR!
        npm ERR! Failed at the webpack@1.0.0 server script.
        npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

        npm ERR! A complete log of this run can be found in:
        npm ERR! C:\Users\mlamp\AppData\Roaming\npm-cache\_logs\2018-01-11T06_19_04_249Z-debug.log
        这个是为什么啊,npm start可以启动,就是npm run server报错
      • ccd93eea92c3:npm run build 报错了

        G:\webpack\webpack-one>npm run build

        > webpack-one@1.0.0 build G:\webpack\webpack-one
        > set NODE_ENV=production && webpack --config ./webpack.production.config.js --progress

        module.js:557
        throw err;
        ^

        Error: Cannot find module 'webpack'
        at Function.Module._resolveFilename (module.js:555:15)
        at Function.Module._load (module.js:482:25)
        at Module.require (module.js:604:17)
        at require (internal/module.js:11:18)
        at Object.<anonymous> (G:\webpack\webpack-one\webpack.production.config.js:1:79)
        at Module._compile (module.js:660:30)
        at Object.Module._extensions..js (module.js:671:10)
        at Module.load (module.js:573:32)
        at tryModuleLoad (module.js:513:12)
        at Function.Module._load (module.js:505:3)
        npm ERR! code ELIFECYCLE
        npm ERR! errno 1
        npm ERR! webpack-one@1.0.0 build: `set NODE_ENV=production && webpack --config ./webpack.production.config.js --progress`
        npm ERR! Exit status 1
        npm ERR!
        npm ERR! Failed at the webpack-one@1.0.0 build script.
        npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

        npm ERR! A complete log of this run can be found in:
        npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2018-01-11T05_55_14_539Z-debug.log
      • ab3855e9d135:老铁,你的文件夹命名 webpack sample project ,我初学的直接就报错.........windows下的,直接就报了个npm ERR! Callback called more than once.
      • 写优雅:产品阶段的构建 标题下的第一个源码 webpack.production.config.js 的配置,没有声明const ExtractTextPlugin = require('extract-text-webpack-plugin');
        虽然后面已经补上了,但是我是一边看,一边粘贴源码调试的时候发现的,如果加上就完美了 😑
      • 0220fda35a37:我怎么给css添加前缀失败,但打包成功了
      • f1ceb3d109b1:谢谢您的文章!所有用中文写的技术好文章都应该极力点赞的,中国的技术进步需要你们!:smile:
      • ccd93eea92c3:我按照你的写,我输入npm run server 怎么报错了?
      • e07022add653:写的真是太好了!提个小问题:HMR热加载那部分,webpack.config.js中devServer字段的contentBase项,应该把 /public 改成 /build 吧?
        8b5c8dcb1c8a:对啊,大神,可以帮我们解答下嘛? @zhangwang
      • 小石头的憧憬:从头到尾学习了一遍,思路清晰,很棒
      • 0b69ecc46908:webpack中npm start报错
        npm ERR! Invalid name:"webpack project"

        npm ERR! A complete log of this run can be found in:
        npm ERR! c:\\Users\Administrator\AppData\Roaming\npm-cache\_logs\2018-01-05T09_23_02_02_557Zdebug.log

        请问这个是怎么回事?该怎么操作才能正常啊?
      • 224091c9eb3f:楼主我感觉你这边文章bug很多啊,引进来的css文件可以直接{styles.root}吗?这个能直接获取这个类吗?还有return的时候不用加“ ` ”这个符号吗?不加的话会报错,没学过jsx
      • 羽纱:看了一遍,跟手做了一遍,从小白到入门,多靠这篇好文章!

      本文标题:入门Webpack,看这篇就够了

      本文链接:https://www.haomeiwen.com/subject/cdphsttx.html