文章结构:

  1. 什么是webpack?

  2. 安装webpack

  3. webpack基本配置

一、什么是webpack?

在学习react时发现大部分文章都是react和webpack结合使用的,所以在学react之前先学习下webpack。前端有一系列的构建工具,如grunt、gulp都是,具体区别联系不做详述。Webpack:是一个解决模块的定义、依赖和导出工具,目的就是把有依赖关系的各种文件(HTML,CSS,JS)打包成一系列的静态资源构建成项目。

二、安装webpack

项目文件目录:

--src:代码开发目录,

--build:开发环境webpack编译打包输出目录,同样按照view、styles、js组织

--dist:生产环境webpack编译打包输出目录,同样按照view、styles、js组织

--node_modules:所以使用的nodeJs模块

--package.json: 项目配置

--webpack.config.js: 开发环境webpack配置

--webpack.production.config.js: 生产环境webpack配置

1.webpack是一个基于node的项目,所以先装好node和npm。

2.然后在项目文件夹下创建package.json文件,可以从其他地方复制粘贴过来,也可以在当前项目文件夹下打开命令窗口,输入npm init命令根据提示创建。下面是我的一个项目中用的package.json文件示例。

  • devDependencies:是开发需要依赖的模块,在发布到生产环境时可以将其去掉的模块,诸如dev-tools,dev-server和jshint校验等。利用命令 npm install module-name  --save-dev 会自动写入package.json文件的devDependencies对象里去。
  • dependencies:是生产环境中需要依赖的模块。而使用  npm install module-name --save 安装的插件,会被写入到 dependencies 对象里面去。
  • scripts:是给命令取了个别名,对于比较复杂的命令时很方便。如运行npm run dev等效于webpack-dev-server --devtool eval --progress --colors --hot --inline --content-base ./build。
 {
"name": "inputCarInfo",
"version": "1.0.0",
"description": "create profile about the car",
"main": "bundle.js",
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --devtool eval --progress --colors --hot --inline --content-base ./build",
"deploy": "set NODE_ENV=production && webpack -p --config webpack.production.config.js"
},
"keywords": [
"react",
"webpack"
],
"author": "yangmin",
"license": "MIT",
"devDependencies": {
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^1.0.1",
"html-webpack-plugin": "^2.26.0",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"node-sass": "^4.1.0",
"sass-loader": "^4.1.0",
"script-loader": "^0.7.0",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.2",
"webpack-md5-hash": "0.0.5",
"webpack-split-hash": "0.0.1"
},
"dependencies": {
"react": "^15.4.1",
"react-dom": "^15.4.1"
}

3.在项目文件夹下新建webpack.config.js文件,比较简单的配置如下。

  • entry:表示入口文件,可以有多个入口文件。文件中包含所有逻辑代码,依赖的其他文件如css,js等。
  • output:将入口文件打包、编译输出的文件,是页面最终引入的文件。
var path = require('path');

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

三、webpack基本配置

1.设置webpack-dev-server

  在开发时,每次更改文件后要运行npm run build 来重新编译、打包文件,无聊又麻烦。我们可以设置 webpack-dev-server来让他自动运行。webpack-dev-server 主要是启动了一个使用 express 的 Http服务器 ,它的作用主要是用来伺服资源文件 。此外这个 Http服务器 和 client 使用了 websocket 通讯协议,原始文件作出改动后, webpack-dev-server 会实时的编译,但是最后的编译的文件并没有输出到目标文件夹。在webpack.config.js配置文件中增加入口命令可以使文件变化时浏览器自动刷新。

  首先要安装它 npm install webpack-dev-server --save-dev。然后在package.json文件的scripts部分增加快捷指令:

 "scripts": {
"dev": "webpack-dev-server --devtool eval --port 7070 --progress --colors --compress --hot --inline --content-base ./build"
},

当你在命令行里运行 npm run dev 的时候他会执行 dev 属性里的值,即可启动webpack服务器监听。这些指令的意思:

  webpack-dev-server:在 localhost:7070 建立一个 Web 服务器。

  --devtool eval: 为你的代码创建原地址。当有任何报错的时候可以让你更精确的定位到文件和行号。

  --progress: 显示编译的输出内容进度。

  --compress: 启用gzip压缩。

  --hot:热替换,开发过程中任何前端代码的更改都会实时的在浏览器中表现出来,不需要手动刷新。

  --colors:显示编译的输出内容颜色。

  --inline:webpack提供两种自动刷新模式 iframe/inline。默认iframe。

  --content-base ./build:指向设置的输出目录,即build文件夹。

详细请参考webpack-dev-server配置文档

如果你还要进行后端开发,就要采用双服务器模式:一个后端服务器和一个资源服务器(即Webpack-dev-server)。配置双服务器热替换模式首先需要修改wepack.config.js的entry属性值:

entry:[
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:7070',
path.resolve(__dirname,'src/js/entry.js')
],

运行npm run dev打开服务器,在浏览器中访问http://localhost:7070 即可看到效果。

2.loader

  webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。Loader 可以理解为模块和资源的转换器,它本身是一个函数,接受源文件作为参数,返回转换的结果。这样,我们就可以通过 require 来加载任何类型的模块或文件,比如 CoffeeScript、 JSX、 LESS 或图片。Loader 本身也是运行在 node.js 环境中的 JavaScript 模块,它通常会返回一个函数。大多数情况下,我们通过 npm 来管理 loader,但是你也可以在项目中自己写 loader 模块。详细参考loaders

  一般loader 一般以xxx-loader的方式命名,xxx代表了这个 loader 要做的转换功能,比如css-loader。Loader 可以在require()引用模块的时候添加,也可以在 webpack 全局配置中进行绑定,还可以通过命令行的方式使用。例如页面中要引入样式文件main.css,我们可以将main.css看成一个模块,然后css-loader会遍历 CSS 文件,然后找到 url() 处理他们,style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。

  • 通过require()添加loader,例如在入口文件entry.js中引入如下:
require("!style!css!../src/css/main.css") // 载入 main.css,多个loader之间用‘!’连接
  • 在webpack.config.js中全局配置:添加config.module

     var webpack = require("webpack");
    var path = require('path'); var config = {
    entry:[
    'webpack/hot/dev-server',
    'webpack-dev-server/client?http://localhost:7070', //增加的入口点使文件改变时浏览器自动刷新当然你也可以直接在你 index.html 引入这部分代码:<script src="http://localhost:7070/webpack-dev-server.js"></script>
    path.resolve(__dirname,'src/js/entry.js')
    ],
    output:{
    path: path.resolve(__dirname, 'build'),
    publicPath:'../',
    filename: 'js/bundle.[chunkhash:8].js',
    chunkFilename:"js/[name].[chunkhash:8].js"
    },
    module:{
    loaders:[
    {//js、jsx
    test: /\.jsx?$/,
    exclude:/node_modules/,//排除node_modules中的库文件,加快编译速度
    loader: 'babel',
    query:{
    presets:['es2015', 'react']
    }
    },
    {//css
    test: /\.css$/,
    loader: ExtractTextPlugin.extract("style", "css")//多个加载器通过!链接,可忽略加载器后缀“-loader”
    },
    {//sass,还需要安装node-sass
    31 test: /\.scss$/,
    loader: 'style!css!sass'
    }, {//less,还需要安装less
    test: /\.less$/,
    loader: 'style!css!less'
    },
    39 {//url-loader:图片、字体图标加载器,是对file-loader的上层封装,支持base64编码。传入的size(也有的写limit) 参数是告诉它图片如果不大于 25KB 的话要自动在它从属的 css 文件中转成 BASE64 字符串.
    test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
    loader: 'url?limit=25000&name=[name].[ext]'
    }
    ]
    },
    }; module.exports = config;

    上面是常用的loader。点此查看更多loader。补充一点编译sass文件除了需要安装sass-loader,还要安装node-sass。但安装node-sass时由于网络原因可能会提示下载SASS_BINARY二进制文件失败,解决办法:

    • 在https://github.com/sass/node-sass/releases/tag/v3.4.2,根据报错信息下载相应版本文件,假设放在E盘根目录下。
    • 回到命令行安装界面。设置SASS_BINARY_PATH环境变量 set SASS_BINARY_PATH=E:/win32-ia32-46_binding.node 文件名根据自己下载的文件自行修改。
    • 再次运行安装命令:npm install node-sass。
    • 在项目的文件夹的node_modules/node-sass文件夹下新建文件夹vendor\win32-ia32-46。
    • 将文件win32-ia32-46_binding.node改名为binding.node放在文件夹vendor\win32-ia32-46下

3.插件plugins

  插件可以完成更多loader不能完成的任务。在webpack.config.js中增加config.plugins:

 var webpack = require("webpack");
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin'); var config = {
//省略entry、output等
plugins:[//给打包输出的文件加banner
new webpack.BannerPlugin("The file is creted by yangmin.--" + new Date()),
new webpack.ProvidePlugin({
  $: "webpack-zepto",
  }),
  /*插件:单独使用style标签加载css文件*/
  new ExtractTextPlugin("css/[name].css"),//设置其路径(路径相对于path)
  /*插件:动态生成html,在webpack完成前端资源打包以后,自动将打包后的资源路径和版本号写入HTML中,达到自动化的效果。*/
  new HtmlWebpackPlugin({
  filename:'view/index-build.html', //生成的html存放路径,相对于 path
template:'src/view/index.html', //html模板路径
inject:true, //允许插件修改哪些内容,包括head与body
hash:false, //为静态资源生成hash值
minify:{ //压缩HTML文件
removeComments:false, //移除HTML中的注释
collapseWhitespace:false //删除空白符与换行符
}
})
]
};
28 module.export = config;

以上是webpack的基本配置用法,后面会学习其优化合并配置。

webpack学习笔记—webpack安装、基本配置的更多相关文章

  1. docker学习笔记1 -- 安装和配置

    技术资料 docker中文官网:http://www.docker.org.cn/ 中文入门课程:http://www.docker.org.cn/book/docker.html docker学习笔 ...

  2. Vue学习笔记-VSCode安装与配置

    一  使用环境: windows 7 64位操作系统 二  VSCode安装与配置  1.下载: https://code.visualstudio.com 直接点击即可. 2. 点击按装程序,默认安 ...

  3. MongoDB学习笔记——数据库安装及配置

    MongoDB数据库安装 MongoDB官方下载地址:https://www.mongodb.com/download-center 首先需要根据Windows版本选择正确的MongoDB版本进行安装 ...

  4. cakephp2.7的学习笔记1 —— 安装与配置

    CakePHP2.7的安装 下载 https://github.com/cakephp/cakephp/releases 解压后扔进你的www目录就可以直接访问 按照提示,修改这两项配置,替换成你喜欢 ...

  5. rabbitmq学习笔记1 安装和配置

    环境 OS: CentOS Linux release 7.1.1503 (Core) kernel:3.10.0-229.el7.x86_64   安装 参考:http://www.rabbitmq ...

  6. CentOS学习笔记--Tomcat安装

    Tomcat安装 通常情况下我们要配置Tomcat是很容易的一件事情,但是如果您要架设多用户多服务的Java虚拟主机就不那么容易了.其中最大的一个问题就是Tomcat执行权限.普通方式配置的Tomca ...

  7. OGG学习笔记02-单向复制配置实例

    OGG学习笔记02-单向复制配置实例 实验环境: 源端:192.168.1.30,Oracle 10.2.0.5 单实例 目标端:192.168.1.31,Oracle 10.2.0.5 单实例 1. ...

  8. OracleDesigner学习笔记1――安装篇

    OracleDesigner学习笔记1――安装篇   QQ:King MSN:qiutianwh@msn.com Email:qqking@gmail.com 一.       前言 Oracle是当 ...

  9. Django:学习笔记(1)——开发环境配置

    Django:学习笔记(1)——开发环境配置 Django的安装与配置 安装Django 首先,我们可以执行python -m django --version命令,查看是否已安装django. 如果 ...

随机推荐

  1. grunt实用总结

    grunt实用总结 文章梗概如下: 如何让Grunt在项目跑起来 初识:Gruntfile.js 术语扫盲:task & target 如何运行任务 任务配置 自定义任务 文件通配符:glob ...

  2. MVC中使用Unity Ioc Container

    ASP.NET MVC中使用Unity Ioc Container   写在前面 安装Unity 添加服务层 IArticleRepository类型映射 服务注入到控制器 Global.asax初始 ...

  3. 完美的拥抱GitHub

    Visual Studio 2012完美的拥抱GitHub   前言 一直以来都想使用Git来管理自己平时积累的小代码,就是除了工作之外的代码了.有时候自己搞个小代码,在公司写了,就要通过U盘或者网盘 ...

  4. IOS UI 第九篇: UITABLEVIEW

    学英语.所以用英文来记录笔记.   Define the dataSource:   @implementation ViewController{    NSMutableArray *dataSo ...

  5. 如何使用MacVim

    如何使用MacVim 如何使用MacVim 如何使用MacVim呢? 命令模式 按下ESC 高效率移动 1.在插入模式之外 基本上来说,你应该尽可能少的呆在插入模式里面,因为在插入模式里面 VIM 就 ...

  6. [转]解决MySQL出现大量unauthenticated user的问题

    最近发现两台MySQL server在中午的时候忽然(很突然的那种)发飙,不断的挂掉.重启mysql也尽是失败,看mysql的errorlog,只能看到类似如下的信息: Forcing close o ...

  7. data格式加载图片

    html img 使用data格式加载图片   背景 这久闲来无事给一位客户测试一款体检软件,是winform结构的,其中有一个功能是需要把生成的体检报告导出为html格式.测试导出后直接在谷歌浏览器 ...

  8. BlackBerry Phonegap项目的搭建

    前言 事实上,这称不上是搭建,因为整个项目依旧是phonegap包里的例子项目,是使用ant来构建的. 准备材料: 1. JDK(不是java系的童鞋请自觉离开) 2. Apache ant http ...

  9. MySql主从配置实践及其优势浅谈

    MySql主从配置实践及其优势浅谈 1.增加两个MySQL,我将C:\xampp\mysql下的MYSQL复制了一份,放到D:\Mysql2\Mysql5.1 修改my.ini(linux下应该是my ...

  10. zabbix实现对磁盘动态监控

    zabbix实现对磁盘动态监控 前言 zabbix一直是小规模互联网公司服务器性能监控首选,首先是免费,其次,有专门的公司和社区开发维护,使其稳定性和功能都在不断地增强和完善.zabbix拥有详细的U ...