以前习惯用gulp+less来开发项目，由于公司项目用的vue开发的，所以学下webpack这个打包工具。以下是我学习时的笔记，希望给在webpack配置过程中遇到麻烦的朋友一丝帮助。

目前只配置了sass,css,js,html,es6,图片编译，字体引入，热加载这几项，简单项目已经够用。

如果深入webpack可以配置很多，原谅我也只是初次配置

1.首先建一个自己的项目文件夹，npm init -y快速生成一个配置文件

2. npm i webpack -D   本地安装webpack 
3. npm i webpack-dev-server -g   全局安装webpack-dev-server

4. npm i webpack-dev-server -D 添加到package.json文件里

5.以下是我的package.json，里面的包都是常用的

{

  "name": "webpack-demo",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "start": "webpack-dev-server",

    "build": "webpack"

  },

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "babel-core": "^6.0.0",

    "babel-loader": "^6.0.0",

    "babel-preset-latest": "^6.0.0",

    "cross-env": "^3.0.0",

    "css-loader": "^0.28.0",

    "file-loader": "^0.9.0",

    "extract-text-webpack-plugin": "^2.1.0",

    "html-webpack-plugin": "^2.28.0",

    "node-sass": "^4.5.2",

    "sass-loader": "^6.0.3",

    "style-loader": "^0.16.1",

    "webpack": "^2.2.0",

    "webpack-dev-server": "^2.4.2"

  }

}

根目录下的webpack.config.json

// html压缩

var HtmlWebpackPlugin = require('html-webpack-plugin');

// js css分离

var ExtractTextPlugin = require('extract-text-webpack-plugin');

var path = require('path')

var webpack = require('webpack')

module.exports = {

    // 配置入口文件

  entry: {

      build: './src/main.js'

  },

  // 配置输出路径

  output: {

    path: path.resolve(__dirname, './dist'),

    // publicPath: '/dist/',//指定资源引用目录

    filename: '[name].js'

  },

  // loader模块配置

  module: {

    loaders: [

        // js 文件

      {

        test: /\.js$/,

        loader: 'babel-loader',

        exclude: /node_modules/

      },

      // css 文件

      {

        test: /\.css$/,

        use: ExtractTextPlugin.extract({

          fallback: "style-loader",

          use: "css-loader"

         })

      },

      //解析.scss文件

      {

        test: /\.scss$/,

        use: ExtractTextPlugin.extract({

          fallback: "style-loader",

          use: ["css-loader", "sass-loader"]

        })

      },

      // 字体

      {

        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,

        loader: 'file-loader'

      },

      // 图片

      {

        test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,

        loader: 'file-loader',

        query: {

          name: '[name].[ext]?[hash]'

        }

      }

    ]

  },

  // 插件配置

  plugins: [

      new HtmlWebpackPlugin({

          template: './index.html' // 模版文件

      }),

      new ExtractTextPlugin({

          filename: 'style.css'

          /*filename: (getPath) => {

              return getPath('dist/[name].css').replace('dist','css')

          }*/

      })

  ],

  // webpack-dev-server 热加载

  devServer: {

    historyApiFallback: true,

    noInfo: true

  },

  devtool: '#eval-source-map'

}

.babelrc文件

{

  "presets": [

    ["latest", {

      "es2015": { "modules": false }

    }]

  ]

}

index.html移入编译后的文件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="dist/styls.css">

    <script src="dist/build.js"></script>

</head>

<body>

    <h1>hello</h1>

    <h2>hello</h2>

    <p>hello <span>hello world</span></p>

</body>

</html>

我的项目目录

main.js里面移入所有需要打包的文件

import {hello,hello1} from './script/hello1';

import {demo} from './script/hello';

import './style/hello.css';

import './style/hello.scss';

命令行npm start 启动项目  npm run build 编译项目

我托管到了github,有兴趣的同学可以参考下:https://github.com/wmui/webpack-demo

webpack2.0简单配置教程的更多相关文章

  1. Linux下的GitHub安装与简单配置教程 ~ 转载

    Linux下的GitHub安装与简单配置教程   1.GitHub简介 Git是一个分布式版本控制系统,与其相对的是CVS.SVN等集中式的版本控制系统. 2.Git的安装 1)安装Git a.查看与 ...

  2. hadoop 2.0 详细配置教程(转载)

    转载: http://www.cnblogs.com/scotoma/archive/2012/09/18/2689902.html 作者:杨鑫奇 PS:文章有部分参考资料来自网上,并经过实践后写出, ...

  3. entity framework core 2.0 & sqlite 配置教程

    我用的是vs2017,需要下载.net core 2.0 sdk. .net core 下载地址:点我下载 1.在Visual Studio之中创建一个.net core的控制台项目 2.修改cspr ...

  4. Ubuntu 14.04 64bit下Caffe + Cuda6.5/Cuda7.0 安装配置教程

    http://www.embeddedlinux.org.cn/emb-linux/entry-level/201612/21-6005.html 随着深度学习快速发展的浪潮,许多有兴趣的工作者都转入 ...

  5. Linux下的GitHub安装与简单配置教程

    1.GitHub简介 Git是一个分布式版本控制系统,与其相对的是CVS.SVN等集中式的版本控制系统. 2.Git的安装 1)安装Git a.查看与使用 在ubuntu下可以使用如下命令进行查看系统 ...

  6. hadoop 2.0 详细配置教程

    http://www.cnblogs.com/scotoma/archive/2012/09/18/2689902.html

  7. iis8.0 https配置教程

    打开iis>选择左侧根>点击右侧服务器证书 打开界面后 空白处点击右键选择导入 成功导入证书 选择需要绑定证书的网站点击选择>编辑绑定>ssl证书请选择您导入的证书 点击SSL ...

  8. struts2.0简单教程

    Struts2.0简单配置教程: 在Eclipse中配置Struts2 步骤一:首先打开java ee并建立一个动态网站项目,我建立的项目名为TestDemo,如下图: 建立之后可在左侧发现工程,展开 ...

  9. 简单vue项目脚手架（vue+webpack2.0+vuex+vue-router）

    github地址 使用技术栈 webpack(^2.6.1) webpack-dev-server(^2.4.5) vue(^2.3.3) vuex(^2.3.1) vue-router(^2.5.3 ...

随机推荐

  1. 技术blog链接

    http://www.cnblogs.com/anrainie/ 蔡羽 基础知识漫谈 http://blog.csdn.net/ioio_jy 姜晔的技术专栏 从苏宁电器到卡巴斯基

  2. Rokid开发者社区skill之【历史上的今天】之简介+玩法+设计+实现+心得

    Skill简介: 来源:好奇心.探索欲.趣味性: 资源:百度百科: 方式:实时获取,自动更新: 技能玩法: 想要进入历史上的今天这个skill,则对若琪说:若琪,打开历史上的今天. 想要了解某天的历史 ...

  3. dp之多维背包hdu4501

    思路:将v1,v2,k都当作一种体积,每种物品只能取一次,求max....... 反思:以前写背包,由于只有一个体积,所以习惯性的在for中,就所取的最小值限制,而在这次,因为这里导致wa了,具体是因 ...

  4. ios UITextField文本框基本使用,以及所有代理方法的作用

    /* UITextField文本输入框 */ UITextField * textField = [[UITextField alloc]initWithFrame:CGRectMake(50, 50 ...

  5. php底层HashTable的实现

    本文转载自:  http://segmentfault.com/blog/tree/1190000000718519 HashTable对PHP来说是一种非常重要的数据结构.很多PHP的内部实现(变量 ...

  6. mount -t nfs 不能使用

    去年使用一个新的文件系统的时候,发现mount -t nfs ip:/g/ftp ~/mnt -o tcp,nolock 不能使用 一直以为是因为mount 命令更新了,有些用法我不会用,但是刚才发现 ...

  7. C#操作摄像头 实现拍照功能

    从正式工作以来一直做的都是基于B/S的Web开发,已经很长时间不研究C/S的东西了,但是受朋友的委托,帮他做一下拍照的这么个小功能.其实类似的代码网上有很多,但是真的能够拿来运行的估计也没几个.本来是 ...

  8. Zookeeper配置文件参数与含义

    zoo.cfg   # The number of milliseconds of each tick tickTime=2000 # The number of ticks that the ini ...

  9. 使用 OpCache 提升 PHP 5.5+ 程序性能

    说明 PHP 5.5 以后内建了 OpCache , OpCache 的加速原理是把编译后的 bytecode 存储在内存里面, 避免重复编译 PHP 所造成的资源浪费. 引用 How To Enab ...

  10. JS实现点击表头表格自动排序（含数字、字符串、日期）

    这篇文章主要介绍了利用JS如何实现点击表头后表格自动排序,其中包含数字排序.字符串排序以及日期格式的排序,文中给出了完整的示例代码,并做了注释,相信大家都能看懂,感兴趣的朋友们一起来看看吧. < ...