官方文档:

http://webpack.github.io/docs/

1. 安装python
2. 安装node.js msi
3. npm自动打包在最新的node.js安装包里

被封的包用国内镜像下载

// 全局安装webpack
npm install webpack -g

常规项目把依赖写入package.json包中去
// 进入项目
cd myproject
// 初始化npm,生成package.json
npm init
// 写入package.json关于webpack的依赖
npm install webpack --save-dev

在项目目录新建webpack.config.js文件,并且写入:

var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');

module.exports = {
    // 插件项
    plugins: [commonsPlugin],
    // 页面入口文件配置
    entry: {
        index: './src/js/page/index.js',
        component: './src/js/page/component.js'
    },
    // 入口文件输出配置
    output: {
        path: 'dist/js/page',
        filename: '[name].js'
    },
    module: {
        // 加载器配置
        loaders: [
            // .css文件使用 style-loader 和 css-loader 来处理
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            // .js文件使用 jsx-loader 来编译处理
            { test: /\.js$/, loader: 'jsx-loader?harmony' },
            // .scss文件使用style-loader、css-loader和sass-loader来编译处理
            // loader可以省略不写,多个loader之间用!连接
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap' },
            // 图片文件使用 url-loader 来处理,小于8kb的直接转为base64
            // url-loader将样式中引用到的图片转为模块来处理,使用该加载器需要先进性安装:
            // npm install url-loader --save-dev
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }
        ]
    },
    // 其他解决方案配置
    resolve: {
        // 从这里查找module
        root: 'E:/myproject/node_modules', // 绝对路径
        // 自动扩展文件后缀名,意味着我们require模块可以省略不写后缀名
        extensions: ['', '.js', '.json', '.scss'],
        // 模块别名定义,方便后续直接引用别名,无须多谢长长的地址
        alias: {
            AppStore: 'js/stores/AppStores.js', // 后续直接 require('AppStore') 即可
            ActionType: 'js/actions/ActionType.js',
            AppAction: 'js/actions/AppAction.js'
        }
    }
};

配置信息的参数“?limit=8192”表示将所有小于8kb的图片都转为base64形式
(其实应该说超过8kb的才使用 url-loader 来映射到文件,否则转为data url形式)。

// 执行webpack.config.js文件
webpack
// 压缩混淆脚本,这个非常非常重要!
webpack - p

// 安装vue框架
npm install vue --save-dev

我的webpack与vue打包实例github地址:
https://github.com/liuqiuchen/myWebpack

添加vue加载器时:

/**
 * Created by user on 2016/11/17.
 */
var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
// 命令行下载关于vue加载器的模块:
// npm install extract-text-webpack-plugin --save-dev
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    // 插件项
    /**
     * 使用webpack的DefinePlugin来指定生产环境,以便在压缩时可以让UglifyJS自动删除代码块内的警告语句
     */
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    ],
    // 页面入口文件配置
    entry: {
        index: './src/js/page/index.js',
        component: './src/js/page/component.js'
    },
    // 入口文件输出配置
    output: {
        path: 'dist/js/page',
        filename: '[name].js'
    },
    module: {
        // 加载器配置
        loaders: [
            // .css文件使用 style-loader 和 css-loader 来处理
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            // .js文件使用 jsx-loader 来编译处理
            { test: /\.js$/, loader: 'jsx-loader?harmony' },
            // .scss文件使用style-loader、css-loader和sass-loader来编译处理
            // loader可以省略不写,多个loader之间用!连接
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap' },
            // 图片文件使用 url-loader 来处理,小于8kb的直接转为base64
            // url-loader将样式中引用到的图片转为模块来处理,使用该加载器需要先进性安装:
            // npm install url-loader --save-dev
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' },
            { test: /\.vue$/, loader: 'vue' }
        ]
    },
    vue: {
       // ... other vue options
        loaders: {
            js: 'coffee',
            html: 'raw'
        }
    },
    // 其他解决方案配置
    resolve: {
        // 从这里查找module
        root: 'E:/myproject/node_modules', // 绝对路径
        // 自动扩展文件后缀名,意味着我们require模块可以省略不写后缀名
        extensions: ['', '.js', '.json', '.scss'],
        // 模块别名定义,方便后续直接引用别名,无须多谢长长的地址
        alias: {
            AppStore: 'js/stores/AppStores.js', // 后续直接 require('AppStore') 即可
            ActionType: 'js/actions/ActionType.js',
            AppAction: 'js/actions/AppAction.js'
        }
    }
};

常用的Webpack配置的更多相关文章

  1. 常用的webpack 配置

    const path = require('path'); let HtmlWebpackPlugin = require('html-webpack-plugin'); let VueLoaderP ...

  2. webpack配置命令

    从2015年开始,webpack就是当前最火的构建工具.跟着时代向前走.准没错.我们要追随大神的脚步.走在前端技术栈的前列.大神等等我. 由于webpack是基于nodejs环境下的.所以先安装nod ...

  3. Webpack配置示例和详细说明

    /* * 请使用最新版本nodejs * 默认配置,是按生产环境的要求设置,也就是使用 webpack -p 命令就可以生成正式上线版本. * 也可以使用 webpack -d -w 命令,生成用于开 ...

  4. webpack配置这一篇就够

    最近看了一篇好文,根据这个文章重新梳理了一遍webpack打包过程,以前的一些问题也都清楚了,在这里分享一下,同时自己也做了一些小的调整 原文链接:http://www.jianshu.com/p/4 ...

  5. 前端工程化(二)---webpack配置

    导航 前端工程化(一)---工程基础目录搭建 前端工程化(二)---webpack配置 前端工程化(三)---Vue的开发模式 前端工程化(四)---helloWord 继续上一遍的配置,本节主要记录 ...

  6. vue-cli中webpack配置详解

    vue-cli是构建vue单页应用的脚手架,命令行输入vue init <template-name> <project-name>从而自动生成的项目模板,比较常用的模板有we ...

  7. webpack配置实践

    首先我们的需求: 打包调试 提取公共代码 压缩 热替换 1.打包调试 第一步,我们在目标文件夹下安装webpack(假设已有package.json)npm i webpack@ -gcnpm i w ...

  8. 对vue中 默认的 config/index.js:配置的详细理解 -【以及webpack配置的理解】-config配置的目的都是为了服务webpack的配置,给不同的编译条件提供配置

    当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面  (环境变量及其基本变量的配置) var path = require('path') ...

  9. webpack配置指南

    Webpack已经出来很久了,相关的文章也有很多,然而比较完整的例子却不是很多,让很多新手不知如何下脚,下脚了又遍地坑 说实话,官方文档是蛮乱的,而且有些还是错的错的..很多配置问题只有爬过坑才知道 ...

随机推荐

  1. “四核”驱动的“三维”导航 -- 淘宝新UI(需求分析篇)

    前言 孔子说:"软件是对客观世界的抽象". 首先声明,这里的"三维导航"和地图没一毛钱关系,"四核驱动"和硬件也没关系,而是为了复杂的应用而 ...

  2. wordpress多站点配置

    wordpress作为全球第一的个人博客搭建平台一直在国内外有着较高的人气,从3.0版本开始就已经支持多站点的搭建.该功能可以让子站点运行主站点的程序,不需要再每个站点分别存放网站程序.最近更新的4. ...

  3. ASP.NET MVC5+EF6+EasyUI 后台管理系统(73)-微信公众平台开发-消息管理

    系列目录 前言 回顾上一节,我们熟悉的了解了消息的请求和响应,这一节我们来建立数据库的表,表的设计蛮复杂 你也可以按自己所分析的情形结构来建表 必须非常熟悉表的结果才能运用这张表,这表表的情形涵盖比较 ...

  4. 8、Struts2 运行流程分析

    1.流程分析: 请求发送给 StrutsPrepareAndExecuteFilter StrutsPrepareAndExecuteFilter 询问 ActionMapper: 该请求是否是一个 ...

  5. 120项改进:开源超级爬虫Hawk 2.0 重磅发布!

    沙漠君在历时半年,修改无数bug,更新一票新功能后,在今天隆重推出最新改进的超级爬虫Hawk 2.0! 啥?你不知道Hawk干吗用的? 这是采集数据的挖掘机,网络猎杀的重狙!半年多以前,沙漠君写了一篇 ...

  6. 【Machine Learning】机器学习及其基础概念简介

    机器学习及其基础概念简介 作者:白宁超 2016年12月23日21:24:51 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现的深入理解.本系列文章是作者结 ...

  7. JavaWeb——Listener

    一.基本概念 JavaWeb里面的listener是通过观察者设计模式进行实现的.对于观察者模式,这里不做过多介绍,大概讲一下什么意思. 观察者模式又叫发布订阅模式或者监听器模式.在该模式中有两个角色 ...

  8. UVA, 10336 Rank the Languages

    难点在于:递归函数和输出: #include <iostream> #include <vector> #include <algorithm> #include ...

  9. Spring aop应用之实现数据库读写分离

    Spring加Mybatis实现MySQL数据库主从读写分离 ,实现的原理是配置了多套数据源,相应的sqlsessionfactory,transactionmanager和事务代理各配置了一套,如果 ...

  10. error C4430:missing type specifier 解决错误

    错误    3    error C4430: missing type specifier - int assumed. Note: C++ does not support default-int ...