webpack初试

  前言:

    知道这完儿,没用过。关于webpack有很多介绍了,就不多说了。放几个链接,方便新手理解。这是给纯没用过的人了解的。这里只是简单介绍一下webpack的基本用法。大多内容都是来自webpack/getting-started,外加一些自己的理解。

    官方介绍  

[译] 用 Webpack 武装自己

安装 webpack:

  You need to have node.js installed.

$ npm install webpack -g

  eg 1:

  新建文件:

 entry.js

document.write("It works.");

 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SETUP THE COMPILATION</title>
</head>
<body>
    <script type="text/javascript" src="bundle.js"></script>
</body>
</html>

 运行:

$ webpack ./entry.js bundle.js

如果成功,会这样:

在编辑器里会自动生成一个bundle.js



在浏览器打开index.html,会显示 It works.

  eg 2:

 下一步,我们将代码依赖到另一个文件:

添加 content.js

module.exports = "It works from content.js.";

 更新 entry.js

document.write(require("./content.js"));

 

 运行 $ webpack ./entry.js bundle.js



  浏览器将输出:It works from content.js.

webpack 会分析你的入口文件是否依赖其他文件。如果有,这些文件(模块)同样会打包到 bundle.js中。webpack会给每个模块分配给唯一的ID,通过ID来访问这个模块。

  eg 3:

  添加CSS样式到我们的应用中。打包CSS。

  webpack只能处理JavaScript 本身,所以我们需要 css-loader 去处理css文件,我们还需要用style-loader 将转换后的css加载到dom中。

$npm install css-loader style-loader

  Run npm install css-loader style-loader to install the loaders. (They need to be installed locally, without -g) This will create anode_modules folder for you, in which the loaders will live.

看这意思是,要把这个加载的node_modules加载到本地。

  接着,创建个style.css文件

body{
    background-color: yellow;
    font-family: ‘Franklin Gothic Medium‘, ‘Arial Narrow‘;
}

 更新我们的 entry.js文件

require("!style!css!./style.css");
document.write(require("./content.js"));

 执行

$ webpack ./entry.js bundle.js

 再次打开你的index.html:

  

如果我们不想写过长require,可以这样 在 entry.js里

require(“!style!css!./style.css”);,简化为require(“./style.css”)。

   执行:

webpack ./entry.js bundle.js --module-bind ‘css=style!css‘

“Some environments may require double quotes: –module-bind “css=style!css” “

一些环境下可能需要双引号。 

当然,在浏览器中你会看到相同的效果。

eg 4:

添加webpack.config.js.

module.exports = {
    entry : "./entry.js",
    output:{
        path:__dirname,
        filename:"bundle.js"
    },
    module:{
        loaders:[
            { test :/\.css$/,loader:"style!css"}
        ]
    }
};

现在,运行:

webpack

webpack 命令将尝试加载目录中的webpack.config.js文件。

以上。

肯定会有理解不到的地方。这只是webpack的基本用法。更多的需要各位道友一同探索了。~~

demo:https://github.com/miloers/webpack_demo

 

 

  

    

时间: 2024-10-13 07:25:35

webpack初试的相关文章

初试webpack打包

第一次接触webpack,学习了如何用webpack打包,记录一下过程. 1.在项目根目录安装webpack $ npm install webpack --save-dev 2.新建一个webpack.config.js 3.根据需要安装需要的加载器,并在webpack.config.js的module中进行配置,例如加载babel. $ npm install babel-loader --save-dev webpack.config.js文件 var webpack = require(

Vue.js系列之项目搭建(vue2.0 + vue-cli + webpack )

1.安装node node.js环境(npm包管理器) cnpm npm的淘宝镜像 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了(傻瓜式安装).安装完成之后,打开命令行工具,输入 node -v,如果出现相应的版本号,则说明安装成功. npm包管理器,是集成在node中的,所以,直接输入 npm -v就会显示出npm的版本信息. 2.安装cnpm 在命令行中输入 npm install -g cnpm --registry=http://registr

angular踩坑之路:初探webpack

之前费了一番力气安装好了angular开发环境,后面的几天都是在angular中文官网上看文档,照着英雄教程一步一步操作,熟悉了angular的一些基本特性,这部分没有遇到什么大问题,还比较顺利.这两天在看官方文档中的Webpack简介,想跟着文档做一遍,了解一下如何用Webpack打包angular项目,结果遇到了一些问题,因为是初学angular和Webpack的小白,这些问题一时难以解决,花费了不少时间,想在这里记录一下. 首先跟着文档将相关的文件都添加到项目中,目录是这样子的: 根据文档

WebPack+WebStorm调试

怎么用webstorm来调试WebPack? 今天查了很多文档,最终在官网上耐心看完英文文档后,才解决.附上链接:https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/ 工具简介 Windows7 WebStorm2017 Webpack2 谷歌浏览器(默认浏览器) 操作 在Project视图里找到index.html,右击进入Debug模式 WebStrom会自动进入Debu

webpack教程

1 安装 webpack 2 初始化项目 3 webpack 配置 4 实时刷新 5 第三方库 6 模块化 7 打包.构建 安装 webpack# 我们通过 npm 在全局环境下安装 webpack: npm install webpack -g 安装完成后,我们可以使用 webpack 命令,执行 webpack --help 能够查看 webpack 提供的所有命令. 不过,建议在项目下安装一份局域的 webpack: npm install webpack --save-dev 如果觉得

webpack

30分钟手把手教你学webpack实战 阅读目录 一:什么是webpack? 他有什么优点? 二:如何安装和配置 三:理解webpack加载器 四:理解less-loader加载器的使用 五:理解babel-loader加载器的含义 六:了解下webpack的几个命令 七:webpack对多个模块依赖进行打包 八:如何独立打包成样式文件 九:如何打包成多个资源文件 十:关于对图片的打包 十一:React开发神器:react-hot-loader 回到顶部 什么是webpack? 他有什么优点?

Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信

Vue2.0与 [百度地图] 结合使用: 1.vue init webpack-simple vue-baidu-map 2.下载axios cnpm install axios; 3.在main.js中引入axios,并使用 import axios from 'axios' /* 把axios对象挂到Vue实例上面,其他组件在使用axios的时候直接 this.$http就可以了 */ Vue.prototype.$http = axios; 4.引入百度地图的js秘钥--->最好在inde

Webpack入门教程十六

84.HtmlWebpackPlugin的chunks的配置,webpack.config.js文件修改如下 var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry:{ 'Greeter':__dirname + "/app/Greeter.js", 'a':__dirname + "/app/a.js&

Webpack入门教程十七

88.在HtmlWebpackPlugin中使用excludeChunks项,修改webpack.config.js文件,修改内容如下 var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry:{ 'Greeter':__dirname + "/app/Greeter.js", 'a':__dirname + &qu