webpack 通用环境快速搭建

Posted 贝尔塔猫

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack 通用环境快速搭建相关的知识,希望对你有一定的参考价值。

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

 

npm 安装列表:

# webpack 核心
npm webpack --save-dev
# 安装babel加载器,主要是用来编译es2015 npm install babel
-cli babel-core babel-loader babel-preset-es2015 babel-preset-stage-2 --save-dev
# 安装css加载器 npm css
-loader style-loader --save-dev
# 字体文件和图片文件的加载器 npm file
-loader --save-dev
# html文件处理插件 npm html
-webpack-plugin --save

# 热编译
npm webpack-dev-server --save-dev

 

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: /\\.css$/,loader: \'style-loader!css-loader\'},
           {test: /\\.(png|jpe?g|gif|svg)(\\?\\S*)?$/,loader: \'file-loader\',query: {name: \'[name].[ext]?[hash]\'}},
           {test:/\\.(eot|woff|woff2|svg|ttf)([\\?]?.*)$/,loader:"file-loader"}
        ]
    },
    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 通用环境快速搭建的主要内容,如果未能解决你的问题,请参考以下文章

ES6开发环境快速搭建

基于webpack的Vue.js开发环境快速搭建

vue+webpack工程环境搭建

webpack+vue开发环境搭建

Windows 环境下vue+webpack前端开发环境搭建

使用vue2.x+webpack+vuex+sass+axios+elementUI等快速搭建前端项目框架