webpack基础用法

yexiaobai 发布于2019-08-19 18:10 / 1930人阅读

摘要：的用法全在配置中是在环境下运行的，学习之前，请先自行安装环境含安装第一步全局安装第二步建立项目文件夹，如一直回车下去项目目录本地安装搭建目录结构在项目根目录下的简单目录结构如下入口文件安装时，自动建立

----------webpack的用法全在配置中！！
webpack是在node环境下运行的，学习webpack之前，请先自行安装node环境（含npm）；

安装webpack：

第一步：
    npm install -g webpack       //全局安装
第二步：
    建立项目文件夹，如“demo”
    cd demo
    npm init    //一直回车下去
    npm install webpack --save-dev    //项目目录本地安装

搭建目录结构

在项目根目录“demo”下的简单目录结构如下：
    --app
        --index.js    //入口文件
    --node_modules    //安装modules时，自动建立
    --tem    //HTML模板文件夹
        --index.html
    --webpack.config.js    //自建，不会自动生成；一般会有开发和发布两种配置文件
    --package.json    //由npm init时自动建立

webpack简单配置：

webpack的用法全部都在webpack.config.js中；其他地方不要夹杂webpack配置的内容；

//webpack.config.js写入以下内容
    //引入内置功能模块(不需要另行安装)；
    var path = require("path"); 
    var webpack = require("webpack");
    //引入第三方功能模块（需要另行安装）；

//关于第三方模块的用法，强烈建议直接看文档；

    var HtmlWebpackPlugin = require("html-webpack-plugin");
    
    //定义常用路径变量；   
    //返回当前文件（webpack.config.js）所在位置
    var ROOT_PATH = path.resolve(__dirname); 
    var APP_PATH = path.resolve(ROOT_PATH,"app");    //拼接路径；
    var TEM_PATH = path.resolve(ROOT_PATH,"tem");
    var BUILD_PATH = path.resolve(ROOT_PATH,"build");
    
    module.exports = {
        entry : {
            //入口文件
            app : APP_PATH,
            vendors : ["react","react-dom"]
        },
        output : {
            //产出路径；
            path : BUILD_PATH,
            filename : "[name].js"    
        },
        module : {
            //一切资源(images/css/js...)皆模块，一切需要loader解析；
            loaders : [
                {test:/.js?$/,
                    loader:"jsx",
                    exclude:/node_modules/}
            ]
        },
        plugins : [
            //生成HTML文件；
            new HtmlWebpackPlugin({
                title : "Hello world app!",
                template : path.resolve(TEM_PATH,"index.html"),
                filename : "index.html",
                chunks : ["vendors","app"],
                inject : "body",
                // chunksSortMode : "none"
            }),
            new webpack.HotModuleReplacementPlugin()    //保证实时刷新；
        ],
        devServer:{
            //实时刷新，需要inline model和hot:true
            histroyApiFallback : true,
            hot : true,
            inline : true,
            progress : true
        }
    }

注意：webpack分析webpack.config.js中的entry file到其他文件中查找依赖，所有文件被包含在bundle.js中；

webpack给每个module（注意：所有文件都是module，包括通过loaders进来的图片、css等）一个独立id；并使所有module在bundle.js中可以通过id访问；

启动时，只有entry chunk被执行；

webpack支持CMD和AMD规范，但不要在入口文件中使用AMD规范，会报错；

Development Server:

//Webpack搭建本地服务器，监听文件改变，整个页面实时更新；但是不会输出结果文件到磁盘，适于生产环境下调试；

//webpack-dev-server调用的脚本文件不是output的文件，而是保存在内存中的文件……目前引用的方法只知道用Html-webpack-plugin自动生成html页面来引用；

常用配置：

    plugins : [
        //保证实时更新，需要启用内置的HotModuleReplacementPlugin插件；
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer:{
        //server切换到inline model
        histroyApiFallback : true,
        hot : true,
        inline : true,
        progress : true
    }

注意：webpack-dev-server允许内网访问------设置host 0.0.0.0
//webpack-dev-server是实现页面整体刷新；

//在package.json文件中配置"script"脚本设置快捷命令方式
//以下命令行参数不要和上边webpack.config.js中的配置有交集，好像会报错；
"scripts": {
    "start":"webpack-dev-server --colors --host 0.0.0.0 --port 8080"
  }
  使用命令行模式npm run start运行webpack-dev-server；

使用不同的配置build项目：

    //根据需求绑定不同的配置文件并设置scripts脚本运行方式；
  "scripts": {
    "start": "webpack-dev-server --hot --inline",
    "build": "webpack --progress --colors --config webpack.production.config.js"
  }

本人是初学者，有问题希望大家一起探讨，共同进步，谢谢；

实践是检验真理的唯一标准；可以看着入口文件和webpack.config.js，猜测应该出现的结果，然后再执行一下，检验一下；
推荐一篇文章：

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79269.html

学习Vue2.0的建议顺序

摘要：官方文档官方文档，官方文档永远是学习资料的第一步起步扎实的基本功。学习的新特性，理解，建议可以看看阮一峰的教程。的学习曲线会比较长，需要了解到的常用命令，以及和的模块规范，的也很多，其实更多的是属于一项后端语言。学习Vue2.0的建议顺序注：本文是看过其他关于vue文章之后的想法，欢迎转载，请注明出处。　 Vue官方文档：Vue2.0官方文档，官方文档永远是学习资料的第一步起步...

iamyoung001 2019-08-20 14:18 评论0 收藏0
Webpack中hash的用法

摘要：在的配置项中，可能会见到这样的字符。的情况的可以指定。值是特定于整个构建过程的。。因此，以上两个值中更推荐的是。中的则和前面的一样，指定了结果的截取长度。的情况被引用的通过来得到带的文件。所以，这可能并不是我们想要的。在webpack的配置项中，可能会见到hash这样的字符。当存在hash配置的时候，webpack的输出将可以得到形如这样的文件： page1_bundle_54e8...

苏丹 2019-08-20 18:09 评论0 收藏0
一起来了解下这些webpack常用插件

摘要：前言对于的配置以及常用模块大家应该都比较熟悉，本文将说一说的一些常用插件，以及用法。如果在一个前面加了它会被定义为调用。或者被模块的导出的内容所赋值，以支持命名导出。用于生成的文档的标题默认为将写入的文件默认模板的相对或绝对路径。前言对于webpack的配置以及常用模块大家应该都比较熟悉，本文将说一说webpack的一些常用插件，以及用法。目录 1.内置插件名称参数说明...

makeFoxPlay 2019-08-02 16:15 评论0 收藏0
一起来了解下这些webpack常用插件

摘要：前言对于的配置以及常用模块大家应该都比较熟悉，本文将说一说的一些常用插件，以及用法。如果在一个前面加了它会被定义为调用。或者被模块的导出的内容所赋值，以支持命名导出。用于生成的文档的标题默认为将写入的文件默认模板的相对或绝对路径。前言对于webpack的配置以及常用模块大家应该都比较熟悉，本文将说一说webpack的一些常用插件，以及用法。目录 1.内置插件名称参数说明...

gggggggbong 2019-08-30 10:47 评论0 收藏0
webpack搭建多页面系统（三）理解webpack.config.js的四个核心概念

摘要：关于模板的有好几种。一次安装所有的大家可以了解一些的用法把编译成。安装参考文档功能将源文件迁移到指定的目录，返回新的文件路径。安装用法它会将所有的入口中引用的移动到和页面对应的独立分离的文件。 webpack是需要自己编写自己需要的一个配置对象，取决你如何使用webpack,下面指定了所有的可用的配置选项。参考文档：https://doc.webpack-china.org... we...

邹强 2019-08-21 18:43 评论0 收藏0