以前习惯用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移入编译后的文件

    
             
             
hello
    
hello
    
hello hello world

我的项目目录

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