1、基本配置
webpack在执行时，除在命令行传入参数，还可以通过指定的配置文件来执行。默认会搜索当前目录下webpack.config.js。这个文件是一个node.js模块，返回一个json格式的配置对象，或者通过--config选项来指定配置文件。
 
//创建webpack.config.js
var webpack = require('webpack');
module.exports = {
     entry:'./entry.js', //入口文件
     output:{
          //node.js中__dirname变量获取当前模块文件所在目录的完整绝对路径 
          path:__dirname, //输出位置
          filename:'build.js' //输入文件
     },
     module:{
          loaders:[
               {
                   test:/\.css$/,//支持正则
                   loader:'style-loader!css-loader' 
               }
          ]
     },
//其他解决方案配置
resolve: {
    extensions: ['', '.js', '.json', '.css', '.scss']//添加在此的后缀所对应的文件可以省略后缀
},
     //插件
     plugins:[
          new webpack.BannerPlugin('This file is created by ly')
     ]
}
 
//entry.js中引入css模块：
require('./style.css');
 
::运行
webpack
 
2、plugins 插件
可以通过npm安装第三方插件，如：BannerPlugin的作用是给输出的文件头部添加注释信息。
 
3、开发环境
 
::编译输出内容带进度和颜色
webpack --progress --colors
 
::启动监听模式（没有变化的模块会在编译后缓存大内存中，不会每次都被重新编译）
webpack --watch
webpack -w
 
::使用开发服务（它将在localhost:8080启动一个express静态资源web服务器。并启动监听模式自动webpack，在浏览器打开http://localhost:8080/，就可以浏览项目页面，并通过一个socket.io服务实时监听变化并自动刷新页面）
npm install webpack-dev-server -g
 
4、启动webpack-dev-server
注意：在启动了webpack-dev-server后，编译后的文件并没有输出到webpack.config.js中配置的output输出目标文件夹中，而是将实时编译后的文件保存在内存中。
例子：
 
//目录结构
myapp
    |__dist
    |   |__styles
    |   |__js
    |       |__bundle.js
    |   |__index.html
    |__src
    |   |__component
    |   |__index.js
    |__node_modules
    |__package.json
    |__webpack.config.js
 
//webpack.config.js
var webpack = require('webpack');
var path = require('path');
module.exports = {
    entry:'./src/index.js',
    output:{
        path:path.resolve(__dirname, './dist/'),
        filename:'build.js'
    },
    //设置开发者工具的端口号,不设置则默认为8080端口
    devServer: {
        inline: true,
        port: 8181
    },
    module:{
        loaders:[
            {
                test:/\.js?$/,
                exclude:/node_modules/,
                loader:'babel-loader',
                query:{
                    presets:['es2015','react']
                }
            },
            {
                test:/\.css$/,
                loader:'style-loader!css-loader'
            }
        ]
    }
};
 
//package.json
{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "build.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --devtool eval-source-map --progress --colors --hot --inline --content-base ./dist",
    "build": "webpack --progress --colors"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.4.0",
    "babel-preset-es2015": "^6.22.0",
    "jsx-loader": "^0.13.2",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  },
  "dependencies": {
    "jquery": "^3.1.1"
  }
}
 
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
<div id="app"></div>
<script src="build.js"></script>
</body>
</html>
 
::安装所有依赖
npm install
::运行
npm run dev
 
最后在浏览器中打开：http://localhost:8181/index.html
 
详解package.json中命令：
 
webpack-dev-server   //启动webpack-dev-server
--progress --colors    //打包进行显示颜色
--hot  //开启模块热修复功能
--content-base ./dist   //设置webpack-dev-server运行的根目录是 ./dist
--inline  //使用inline的方式进行页面自动刷新
--quiet  //控制台中不输出打包信息
--compress  //开启gzip压缩
 
webpack-dev-server支持两种自动刷新的方式：
①Iframe mode
在网页中嵌套一个iframe，将自己的应用注入都这个iframe中，每次文件修改后都是这个iframe进行了reload
②inline mode
也是自动便也打包刷新
 
 
 
 
 

webpack.config.js配置文件的更多相关文章

  1. Webpack探索【2】--- 安装、项目初始化、webpack.config.js配置文件

    本文主要讲安装.项目初始化.webpack.config.js配置文件方面的内容.

  2. webpack前端构建工具学习总结（三）之webpack.config.js配置文件

    Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行.默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一 ...

  3. react webpack.config.js 入门学习

    在学习react 的时候必然会用到webpack打包工具,webpack的快速入门另外一篇文章中有记录,这里只记录webpack.config.js文件,因为每个项目下都必须配置,通俗的讲,它的作用就 ...

  4. webpack配置：less/sass文件打包和分离、自动处理css前缀、消除未使用的css及完整的webpack.config.js文件

    一.less文件打包和分离 1.要使用less,首先使用npm安装less服务:还需要安装Less-loader用来打包使用. npm install less --save-dev npm inst ...

  5. webpack.config.js配置入口出口文件

    目录结构: 新建webpack.config.js配置文件 const path = require('path') //导出 path是node内置的包 通过npm init初始化得到package ...

  6. webpack 4.0 配置文件 webpack.config.js文件的放置位置

    一般webpack.config.js是默认放在根目录的,不在根目录的时候需要在package.json中制定位置,我的配置文件目录是config/webpack.config.js,在package ...

  7. webpack的配置文件[webpack.config.js]

    如果项目里没有webpack.config.js这个文件,webpack会使用它本身内置在源码里的配置项. webpack.config.js这个配置名称可以通过指令修改 npx webpack -- ...

  8. [js高手之路]深入浅出webpack系列2-配置文件webpack.config.js详解

    接着上文,重新在webpack文件夹下面新建一个项目文件夹demo2,然后用npm init --yes初始化项目的package.json配置文件,然后安装webpack( npm install ...

  9. [js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)

    [js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...

随机推荐

  1. [ExtJS5学习笔记]第二十一节 Extjs5中使用config配置给ext.widget或者create方法传递参数

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/39252805 官方例子:http://docs.sencha.com/extjs/5. ...

  2. 1085. Perfect Sequence (25) -二分查找

    题目如下: Given a sequence of positive integers and another positive integer p. The sequence is said to ...

  3. (NO.00004)iOS实现打砖块游戏(七):关卡类的实现

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 关卡游戏的精髓都集中在游戏的关卡里,其中包含了游戏的所有要素,至 ...

  4. 解决WebView加载本地文件乱码

    一.问题描述 这几天现场反馈一些问题,主要是文件浏览有部分文件显示乱码,像这样: 而文件本身又是用WebView加载的,出现有的文件正常有的文件不正常. 二.问题解决 webView 加载主要有:lo ...

  5. Android最佳实践之SystemBar状态栏全版本适配方案

    前言 自从MD设计规范出来后,关于系统状态栏的适配越受到关注,因为MD在5.0以后把系统状态栏的颜色改为可由开发者配置的,而在5.0之前则无法指定状态栏的颜色,所以这篇就说说使用Toolbar对系统状 ...

  6. UNIX网络编程——TCP回射服务器/客户端程序

    下面通过最简单的客户端/服务器程序的实例来学习socket API. serv.c 程序的功能是从客户端读取字符然后直接回射回去: #include<stdio.h> #include&l ...

  7. Tensorflow使用Cmake在Windows下生成VisualStudio工程并编译

    传送门: https://github.com/tensorflow/tensorflow/tree/r0.12/tensorflow/contrib/cmake http://www.udpwork ...

  8. Android使用SimpleAdapter

    SimpleAdapter的使用步骤如下: 声明ListView,并进行初始化操作 准备数据集,一般用list来实现,当然也可以使用数组 为listview适配simpleadapter 如下代码: ...

  9. UNIX环境高级编程——文件I/O

    一.文件描述符 对于Linux而言,所有对设备或文件的操作都是通过文件描述符进行的.当打开或者创建一个文件的时候,内核向进程返回一个文件描述符(非负整数).后续对文件的操作只需通过该文件描述符,内核记 ...

  10. (NO.00003)iOS游戏简单的机器人投射游戏成形记(四)

    上篇说道要想将手臂固定在机器人身体上,而且手臂还能转动,简单的办法是使用物理关节.但这不是只有这种办法.用关节固定物体有时候不能满足需要,这时必须自己动手写代码处理,后面会介绍另一种固定的方法. 在S ...