module.exports = {
entry: './basic/app.js',
output: {
path: './assets/',
filename: '[name].bundle.js'
},
module: {
loaders: [{
//babel-loader加载器,将es6转es5
test: /\.js$/,
loader: 'babel'
}, {
//style-loader,css-loader加载器,当调用bundle.js
//时动态生成sytle标签,插入html中的head
test: /\.css$/,
loader: 'style!css'
}]
}
};

package.json 中的安装依赖


"devDependencies": {
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.16.0",
"css-loader": "^0.25.0",
"style-loader": "^0.13.1",
"webpack": "^1.13.2"
}

安装过程的坑


cnpm install webpack --save-dev
cnpm install babel-loader --save-dev
cnpm install css-loader --save-dev
cnpm install style-loader --save-dev

运行webpack 出现错误,后来查了babel-loader需要安装babel-preset-es2015包依赖


cnpm install babel-preset-es2015 --save-dev

记一个简单的webpack.config.js的更多相关文章

  1. webpack3中文版使用参考文档--全面解析webpack.config.js

    Webpack目前官方发布的最新版本是3.1.0,相对于2.0的怎么本,在语法上没有变动,只是新增了功能.使用webpack,需要事先安装node.js,并对node.js生态有一些基本的了解,比如( ...

  2. 从0构建webpack开发环境(一) 一个简单webpack.config.js

    本文基于webpack4.X,使用的包管理工具是yarn 概念相关就不搬运了,直接开始 首先项目初始化 mkdir webpack-demo && cd webpack-demo ya ...

  3. webpack.config.js 参数简单了解

    webpack.config.js文件通常放在项目的根目录中,它本身也是一个标准的Commonjs规范的模块. var webpack = require('webpack'); module.exp ...

  4. react webpack.config.js 入门学习

    在学习react 的时候必然会用到webpack打包工具,webpack的快速入门另外一篇文章中有记录,这里只记录webpack.config.js文件,因为每个项目下都必须配置,通俗的讲,它的作用就 ...

  5. webpack配置:less/sass文件打包和分离、自动处理css前缀、消除未使用的css及完整的webpack.config.js文件

    一.less文件打包和分离 1.要使用less,首先使用npm安装less服务:还需要安装Less-loader用来打包使用. npm install less --save-dev npm inst ...

  6. 从零开始配置一个简单的webpack打包

    一.基础配置 1.创建一个名为demo-webpack的文件夹(名称随意) 2.初始化一个package.json文件 //在cmd窗口中使用以下命令快速创建 npm init -y 3.安装webp ...

  7. webpack(4)webpack.config.js配置和package.json配置

    前言 上一篇文章我们使用webpack打包成功了,但是每次都要自己手动输入打包的文件地址和打包到哪里去的地址,非常麻烦,所以这里介绍使用配置文件进行打包 webpack.config.js 首先我们创 ...

  8. webpack教程(二)——webpack.config.js文件

    首先我们需要安装一个webpack插件html-webpack-plugin,该插件的作用是帮助我们生成创建html入口文件.执行如下命令 npm install html-webpack-plugi ...

  9. [js高手之路]深入浅出webpack系列2-配置文件webpack.config.js详解

    接着上文,重新在webpack文件夹下面新建一个项目文件夹demo2,然后用npm init --yes初始化项目的package.json配置文件,然后安装webpack( npm install ...

随机推荐

  1. 禁用backspace网页回退功能

    <script language="JavaScript">document.onkeydown = check;function check(e) { var cod ...

  2. [App Store Connect帮助]一、 App Store Connect 使用入门(1)App Store Connect 工作流程

    您使用 App Store Connect 提交并管理您在 App Store 中销售的 App,使用 TestFlight 分发您 App 的 Beta 版本,接受法律协议,输入您的税务和银行业务信 ...

  3. Visual Studio Code配置GitHub(Win7环境)

    一.软件环境说明(演示环境) 1.操作系统:Windows7旗舰版(64bit) 2.Visual Studio Code版本:1.32.3 3.Git版本:2.21.0.windows.1 二.软件 ...

  4. 蛤玮学计网 -- 简单的判断ip

    心累 , 狗日的想了好多数据 , ......啥也不说了 我去哭一会 .  #include<stdio.h> #include<string.h> #include<m ...

  5. 数塔问题mod 100(orz)

    看一下题目 和普通的数字三角形看似没啥区别(区别很大) 然后去想:DP方程 DP[i][j]=Max(DP[i-][j],DP[i-][j-])+a[i][j] ans=Max(DP[n][..n]) ...

  6. [转] 64位Oracle 11g R2的客户端连接时报ORA-01019错误

    本文转自:http://blog.csdn.net/downmoon/article/details/8038583 在Win8企业版64位环境下,连接Oracle11g 服务端,搞了整整两天,特将过 ...

  7. vue-cli 打包优化

    1. 优化打包体积 先上2个图 (上图A是优化前的各个js大小对比视图,下图B是优化后,还未完全优化完成的,不过也可以看得出来对比) 图A是3个压缩文件,包括部分图片和使用的所有js,体积都偏大 图B ...

  8. 从"嘿,今晚..."谈消息安全传输中的技术点

    一.初级阶段:信息裸传 特点:在网络上传递明文 黑客定理一:网络上传递的数据是不安全的,属网络于黑客公共场所,能被截取 结果:传递明文无异于不穿衣服裸奔 改进方案:先加密,再在网络上传输 二.进阶阶段 ...

  9. firefox 附加组件栏安装

    firefox 在升级到 30的版本后,发现附加组件栏不兼容了. 搜索组件,add-on bar 会得到一个 new add-on bar的组件,安装完后发现上面不显示ip, 后来才发现,应该安装Th ...

  10. oracle sql*loader的使用

    用法: SQLLDR keyword=value [,keyword=value,...] 有效的关键字:     userid -- ORACLE 用户名/口令    control -- 控制文件 ...