`
_wyh
  • 浏览: 60935 次
社区版块
存档分类
最新评论

webpack安装配置详解

阅读更多

去年写过一篇webpack协助React js工作的简单例子。但是webpack的功能非常强大,并不是专门服务于React js的。之前对webpack理解很模糊,只能简单使用。最近参考其他一些文档教程,重新学习了解了一下webpack的功效。

 

Webpack简介

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

在webpack中,一切资源都被看做是模块,如js,css,图片,json等等等等。在webpack项目中,js模块可以引进这些模块来使用。

 

官方图:


 

Webpack的使用

1,安装

webpack安装的前提是包含NodeJS环境。下面假设机器上已经安装了node环境。

在任何一个自己喜欢的路径下创建新的空文件夹,作为webpack的练习文件夹,终端进入该文件夹后执行下面命令安装webpack

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

2,创建目录结构

终端执行下面命令创建package.json文件,里面包含项目依赖的模块,自定义的脚本任务等等。执行命令时将会提示填写一些项目信息,如实填写或者一直回车跳过就可以。

npm init

 

 举一个最简单的webpack打包例子

在该文件夹下直接创建三个文件,分别为main.js,test.js,main.html

其中test.js的代码如下,创建一个div,设置文字为Hello, Webpack,并用module.exports导出。

var test = document.createElement('div');
test.textContent = 'Hello, Webpack';
module.exports = test;

 main.js代码如下,将test.js中导出的div导入,然后将它放到id为content的元素中。

var test = require('./test.js');
document.getElementById('content').appendChild(test);

之后在终端执行命令,将main.js作为入口文件,webpack将自动识别main.js所依赖的其他文件。然后再指定一个出口文件bundle.js

webpack main.js bundle.js

  命令执行完之后,发现文件目录多出了一个bundle.js,将bundle.js引入main.html中,main.html代码如下,包含一个id为content的div。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="content"></div>

</body>

<script src="bundle.js"></script>

</html>

 打开main.html,将会看到:


 
这就是webpack使用的一个最最简单的例子。
3,Webpack的配置

每次在终端都要设置出口文件和入口文件非常麻烦。我们可以使用webpack的配置文件来设置打包的出口和入口。因为上面的例子所有文件都在根目录下,太过简单,所以删掉目录下处package.json以外的文件,重新创建一个例子。

创建后的目录如下,app目录下存放入口文件,public目录存放唯一的html文件


 

之后在目录下创建名为webpack.config.js的文件。webpack.config.js这个文件名是webpack默认的配置文件名,如果不想使用这个文件名,可以在终端执行

webpack -config [name]

 打开webpack.config.js文件,填入信息

module.exports = {
    entry: __dirname + "/app/main.js",
    output: {
        path: __dirname + "/public",
        filename: "bundle.js"
    }
};

entry代表唯一的入口文件,output设置出口文件,path代表出口文件路径,filename代表出口文件名字。 

在终端执行命令,相当于之前执行的webpack [入口] [出口],只不过这样更加简单,不易出错。

webpack

终端结果:


4,Loaders

webpack项目中,一切皆模块,而实现这个功能的关键,就是Loaders。

通过不同的Loader,webpack可以通过调用外部的脚本或工具对各种各样格式的文件进行处理。

比如:将json转化为js,将React转化为js。

各种Loader都需要单独安装,并且需要在配置文件中进行配置。

 

下面是几个Loader实例

     1,JSON文件

     (1)安装转换json的loader

npm install --save-dev json-loader

     (2)配置webpack.config.js

module.exports = {
    entry: __dirname + "/app/main.js",
    output: {
        path: __dirname + "/public",
        filename: "bundle.js"
    },
    module: {
        loaders:[
            {
                test: /\.json$/,
                loader: "json"
            }
        ]
    }
};

     其中loader的几个参数说明:

           test:一个匹配loaders所处理的文件的扩展名的正则表达式(必须)

           loader:loader的名称(必须)

           include/exclude:手动添加必须处理的文件(文件夹) 或 不需要处理的文件(文件夹) (可选)

           query:为loaders提供额外的设置选项(可选)

     (3)在app目录下创建json_test.js,引入根目录的package.json

var config = require('../package.json');
console.log(config);

module.exports = function () {
    var test = document.createElement('div');
    test.textContent = JSON.stringify(config);
    return test;
};

     (4)和之前一样,在mian.js中引入引入json_test.js中的函数,并append到id为content的元素中。

     (5)编辑index.html,创建id为content的div,在终端执行webpack,生成bundle.js,并引入到index.html中。

     (6)打开index.html,结果如下:


      2,CSS文件

      (1)安装css-loader和style-loader

 

npm install --save-dev style-loader css-loader
   css-loader使你能够使用类似@import和url(...)的方法实现require()的功能,style-loader将所有计算后的样式加入页面中。
      (2)配置文件
module.exports = {
    entry: __dirname + "/app/main.js",
    output: {
        path: __dirname + "/public",
        filename: "bundle.js"
    },
    module: {
        loaders:[
            {
                test: /\.json$/,
                loader: "json"
            },
            {
                test: /\.css$/,
                loader: 'style!css'
            }
        ]
    }
};
      (3)在app目录下创建一个main.css,并写入一些样式     
div {
    color: red;
}

      (4)将css文件引入main.js,main.js文件代码如下:

require('./main.css');

var test = require('./json_test.js');
document.getElementById('content').appendChild(test());

     (5)终端执行webpack命令,再次打开index.html,结果内容变成红色,css文件生效。

 

       3,ReactJS

       之前的博客:http://2914905399.iteye.com/blog/2314533

 

 

5,Webpack构建本地服务器

每次修改项目文件,都要在终端执行一遍webpack,非常麻烦。webpack构建本地服务器,可以使浏览器检测代码的修改,并且自动刷新修改后的结果。使用步骤:

     (1)安装依赖

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

     (2)配置webpack.config.js文件

module.exports = {
    entry: __dirname + "/app/main.js",
    output: {
        path: __dirname + "/public",
        filename: "bundle.js"
    },
    module: {
        loaders:[
            {
                test: /\.json$/,
                loader: "json"
            },
            {
                test: /\.css$/,
                loader: 'style!css'
            }
        ]
    },
    devServer: {
        contentBase: './public', //本地服务器所加载的页面所在的目录
        colors: true, //终端输出结果为彩色
        historyApiFallback: true, //不跳转
        inline: true,  //实时刷新,
        port: 8000  //端口为8000 默认为8080
    }
};

      (3)如果全局已经安装了webpack-dev-server,终端直接执行webpack-dev-server

           如果没有安装,终端执行项目目录下安装的webpack-dev-server

           执行结果为:

                  
       (4)浏览器访问http://localhost:8000/,与之前直接打开index.html效果相同。更改main.js中的 test.textContent = JSON.stringify(config);  改为:

 

test.textContent = "Hello, Webpack";

 将main.css中的color:red改为color:blue。会发现8000页面自动刷新,刷新后效果如下:


 

 

 

参考地址:http://www.jianshu.com/p/42e11515c10f

英文原版地址:http://www.pro-react.com/materials/appendixA/

 

  • 大小: 259.5 KB
  • 大小: 31.2 KB
  • 大小: 13.6 KB
  • 大小: 22.6 KB
  • 大小: 48.6 KB
  • 大小: 59.1 KB
  • 大小: 35.7 KB
  • 大小: 18.9 KB
分享到:
评论

相关推荐

    webpack配置文件详解.js

    webpack配置文件详解

    vue和webpack安装命令详解

    **Webpack配置** Webpack的配置文件通常命名为`webpack.config.js`,在这个文件中,你可以定义入口文件、输出文件、加载器(loader)和插件(plugin)等。例如,一个基本的`webpack.config.js`配置可能如下: ```...

    前端路由&webpack基础配置详解

    在现代前端开发中,路由管理和构建工具配置是两个不可或缺的核心话题。本文将深入探讨前端路由的工作原理,以及如何使用webpack进行基础配置。...希望本文能帮助读者更好地理解前端路由及webpack配置的实际应用。

    Webpack3.0项目打包视频教程详解各种webpack配置

    Webpack3.0项目打包视频教程详解各种webpack配置,熟悉webpack配置原理

    vue-cli中的webpack配置详解

    webpack 2.2.1 目录结构 ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── vue-loader.conf.js ...

    webpack项目开发配置1

    Webpack 项目开发配置详解 在本篇文章中,我们将详细介绍如何配置 Webpack 项目开发环境,包括安装 Node.js、创建项目、安装 Webpack、创建 Webpack 配置文件等步骤。 Node.js 安装 在开始配置 Webpack 项目之前...

    Webpack中SplitChunksPlugin 配置参数详解

    在 webpack 中,SplitChunksPlugin 提供了丰富的配置选项来定制代码分割的策略。 `chunks` 参数控制代码分割针对哪些类型的块生效。'async' 表示仅对异步加载的代码进行分割,'all' 意味着所有块(包括同步和异步)...

    基于VUE项目,webpack配置详解.zip

    【项目资源】: 包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 ... 【项目质量】: 所有源码都经过严格测试,...

    WebPack的高级扩展使用

    WebPack安装-使用-Loader-配置-插件-环境-排错详解(上) 博客地址:http://blog.csdn.net/pcaxb/article/details/53390151 下载地址:http://download.csdn.net/detail/pcaxb/9696873 WebPack安装-使用-Loader-配置...

    webpack高级配置与优化详解

    在webpack配置文件中,entry对象用于定义应用的入口点。每个入口点都对应一个入口文件,webpack会从这个入口文件开始进行依赖分析,生成一个chunk(代码块)。在多页面应用中,可以这样定义多个入口: ```...

    详解webpack babel的配置

    Webpack Babel 配置详解 本文将详细地介绍 Webpack 和 Babel 的配置,以便读者更好地理解和掌握这两种技术的配置。 Babel 介绍 Babel 是一个编译 JavaScript 的平台,它的强大之处表现在可以通过编译帮你达到: ...

    nodejs8.9.4(安装包)_npm_webpack_vue-cli安装详解.zip

    安装完Webpack后,还需要配置webpack.config.js文件,定义入口文件、输出文件以及如何处理不同类型的模块。 Vue CLI(Vue Command Line Interface)是Vue.js官方提供的脚手架工具,用于快速搭建Vue.js项目。它简化...

    06-webpack详解.pdf

    在全局安装了 webpack 后,还需要在项目中局部安装,以便在package.json中定义scripts时,使用局部安装的webpack执行打包任务。 在开始使用webpack之前,通常需要准备一些基础文件和文件夹,例如一个dist文件夹用于...

    webpack5基础配置

    **Webpack5基础配置详解** Webpack 是一款强大的模块打包工具,它能够将JavaScript应用从源代码转换成浏览器可执行的静态资源。Webpack5是其最新版本,带来了更快的性能、更小的bundle体积以及对现代浏览器特性的更...

    webpack引入eslint配置详解

    首先,要使webpack支持eslint,就要要安装 eslint-loader ,命令如下: npm install --save-dev eslint-loader 在 webpack.config.js 中添加如下代码: { test: /\.js$/, loader: 'eslint-loader', enforce: pre...

    webpack配置之后端渲染详解

    Webpack 配置之后端渲染详解 本文主要介绍了使用 Webpack 配置实现之后端渲染的方法和原理,涵盖了热加载、资源列表生成、模板变量引用等内容。下面是对文章中的知识点进行了详细的解释和分析。 Webpack 配置 ...

    webpack4.x开发环境配置详解

    当我们使用npm安装webpack时,若不指定webpack的版本,将默认安装最新版,笔者测试时默认安装的是4.1.1,并不能照搬老教程的方法。为此,笔者进行了最新版配置的探索,使用的是windows操作系统,如果你的是webpack4....

Global site tag (gtag.js) - Google Analytics