码迷,mamicode.com
首页 > Web开发 > 详细

webpack 通用环境快速搭建

时间:2017-02-21 10:42:04      阅读:249      评论:0      收藏:0      [点我收藏+]

标签:nbsp   plugin   log   注释   hunk   地址   build   http   span   

能用babel编译es2015 、 能热编译、能加载静态资源(js/css/font/image)。是一个很通用的开发环境,虽然不智能。但很好扩展

 

npm 安装列表:

npm install 
  babel-cli 
  babel-core 
    babel-loader 
    babel-preset-es2015 
    babel-preset-stage-2 
    css-loader 
    style-loader 
    file-loader 
   webpack-dev-server
   html-webpack-plugin

--save

 

webpack.config.js

var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
var webpack=require("webpack");

module.exports = {
    entry : {
        app : [
            ‘webpack-dev-server/client?http://127.0.0.1:8891‘,  // 如果想编译webpack -p 就注释这句话
            __dirname + "/src/js/main.js"
        ]
    },
    output : {
         publicPath: "http://127.0.0.1:8891/",  // 如果想编译webpack -p 就注释这句话
         path: __dirname+‘/build/js‘, 
         filename:‘[name].js‘   
    },
    module : {
        loaders : [
           {test:/\.js$/,loader:"babel-loader", query: { compact:true },exclude: /node_modules/},
           {test:/\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,loader:"file" },
           {test: /\.css$/,loader: ‘style-loader!css-loader‘},
           {test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,loader: ‘file-loader‘,query: {name: ‘[name].[ext]?[hash]‘}}
        ]
    },
    plugins : [
         new HtmlWebpackPlugin({
            filename:"index.html",  // 如果想使用热编译环境 npm run dev 就使用这个地址
       //filename:__dirname + "/build/index.html" // 如果想编译webpack -p 就使用这个地址 template: __dirname
+‘/src/index.html‘, inject:‘body‘, hash:true, chunks:["app"] }) ] };

 

package.json

 "scripts": {
    "dev": "webpack-dev-server --host  127.0.0.1 --port 8891  --inline --hot "
  },

 

目录结构:

技术分享

 

 

快速启动:npm run dev

 

webpack 通用环境快速搭建

标签:nbsp   plugin   log   注释   hunk   地址   build   http   span   

原文地址:http://www.cnblogs.com/CyLee/p/6422863.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!