webpack、webpack-dev-server安装和配置

webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。

全局安装webpack和webpack-dev-server

我们常规直接使用 npm 的形式来安装：

$ npm install webpack -g

当然如果常规项目还是把依赖写入 package.json 包去更人性化：

npm init       创建一个 package.json 文件
npm install webpack --save-dev     在当前目录下安装局域的 webpack

完成以上两个步骤后，我们的项目下有一个 package.json 文件，一个 node_modules 文件夹，我们还需要一个 index.html 文件

假如我要把webpack安装到myapp这个文件夹下，就要输入一下命令

cd  myapp         #进入myapp文件夹
npm init           #创建package.json文件，这个文件记录了一些项目的名称版本和一些依赖
npm install webpack --save-dev    #安装 webpack 依赖到本地项目中

安装成后package.json文件打开应该是类似这个结构，就说明安装成功了

{
  "name": "first-demo",
  "version": "1.0.0",
  "description": "this is my first-demo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "guowenfh",
  "license": "MIT",
  "dependencies": {},
  "devDependencies": {
    "webpack": "^1.12.14"
  }
}

安装webpack开发工具，简单来说，webpack-dev-server就是一个小型的静态文件服务器。使用它，可以为webpack打包生成的资源文件提供Web服务。

npm install webpack-dev-server --save-dev     #安装webpack-dev-server到本地项目

安装完webpack-dev-server后在命令行执行  webpack-dev-server    然后打开浏览器http://localhost:8080/ 就可以看到效果了。修改代码后直接刷新浏览器就可以看到效果

如果想改完代码自动刷新执行webpack-dev-server –inline  命令就可以实现自动刷新

webpack-dev-server  --inline     #实现自动刷新

webpack常用的一些命令，大家应该了解下

webpack        # 执行一次开发的编译
webpack -p    #来针对发布环境编译(压缩代码)
webpack --watch   #来进行开发过程持续的增量编译(飞快地!)
webpack -d – to    #来生成 SourceMaps
webpack --colors    #显示静态资源的颜色

二. 配置

每个项目下都必须配置有一个 webpack.config.js ，它的作用如同常规的 gulpfile.js/Gruntfile.js ，就是一个配置项，告诉 webpack 它需要做什么。在根目录新建一个 webpack.config.js 文

1)、 entry 是页面入口文件配置，output 是对应输出项配置（即入口文件最终要生成什么名字的文件、存放到哪里），其语法大致为：

module.exports={
    entry: {
        page1: "./page1",
        //支持数组形式，将加载数组中的所有模块，但以最后一个模块作为输出
        page2: ["./entry1", "./entry2"]
    },
    output: {
        path: "dist/js/page",
        filename: "[name].bundle.js"
    }
}

该段代码最终会生成一个 page1.bundle.js 和 page2.bundle.js，并存放到 ./dist/js/page 文件夹下。

module.exports = {
  entry: './main.js',      //入口文件
  output: {
    filename: 'bundle.js'  //打包之后的保存的文件
  }
};

原文来自：http://618cj.com/2016/07/15/webpack教程/

2)、resolve 指定可以被 import 的文件后缀。比如 Hello.jsx 这样的文件就可以直接用 import Hello from 'Hello' 引用

module.exports={
  resolve: {
    //查找module的话从这里开始查找
    root: 'E:/github/flux-example/src', //绝对路径
    //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
       AppStore : 'js/stores/AppStores.js',//后续直接 require('AppStore') 即可
      //'jquery': path.resolve(__dirname, '../src/assets/jQuery-2.1.4.min')
      //'bootstrap': path.resolve(__dirname, './static/js/bootstrap.min')
    }
  },
}

 

3)、module.loaders 是最关键的一块配置。它告知 webpack 每一种文件都需要使用什么加载器来处理：

module.exports={
    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 来编译处理
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            //图片文件使用 url-loader 来处理，小于8kb的直接转为base64
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    }
}

如上，"-loader"其实是可以省略不写的，多个loader之间用“!”连接起来。

注意所有的加载器都需要通过 npm 来加载，并建议查阅它们对应的 readme 来看看如何使用。

拿最后一个 url-loader 来说，它会将样式中引用到的图片转为模块来处理，使用该加载器需要先进行安装：

npm install url-loader -save-dev

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

 

webpack.config.js配置

var webpack =require("webpack");

module.exports = {
    devtool:"source-map",
    entry: {
        index:__dirname + "/src/index.js"
    }, //已多次提及的唯一入口文件
    output: {
        path: __dirname + "/dist", //打包后的文件存放的地方
        filename: "[name].bundle.js",//打包后输出文件的文件名
        publicPath:"/dist/"   //webpack output is served from

    },

    devServer: {
        inline:true,
        contentBase: "./",  //content not from webpack is serverd
        port: '8088',

        historyApiFallback: true,

            //配置服务器
        proxy:{
           '/v4/api/*': {
                  target: 'http://m.maizuo.com',
                  host: 'm.maizuo.com',
                  changeOrigin:true
              }
        }

        /*
          在前端 发起 /v4/api/billboard/home请求

                转发到  http://m.maizuo.com/v4/api/billboard/home
         */
    },


    module:{
        loaders:[
         
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'//添加对样式表的处理,内联样式
            },

            {
                test:/\.js$/, //随便起的test 名字
                exclude: /node_modules/, //排除一个
                // exclude: /(node_modules|src)/, //*****排除多个怎么写？？？
                loader:'babel-loader',
                query:{
                    presets:['es2015','react']
                }
                
            },

            {
                test: /\.scss$/,
                loader:'style-loader!css-loader!sass-loader'
            },

            {
                test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
                loader: 'file-loader',
                options: {
                  name: 'fonts/[name].[ext]?[hash]' //目标文件夹
                }
            }, //添加对字体文件的支持。

            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                  name: 'img/[name].[ext]'
                }
                 //(1)将代码中依赖的图片资源复制到目标文件夹img/文件夹下面
                 //(2)自动更新静态url地址(根据publicPath)。
            }
            
        ]
    },

    plugins:[
        // new webpack.optimize.UglifyJsPlugin({
        //   output: {
        //     comments: false,  // 移除所有的注释
        //   },
        //   compress: {
        //     warnings: false
        //   }
        // })
    ]    
}

webpack模块参数详细说明：https://www.mmxiaowu.com/article/58482332d4352863efb55465

 webpack.config.js 配置举例     http://ant-tool.github.io/webpack-config.html