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. 网站防止用户复制的js方法

    <script type="text/javascript">function stop() {return false;}document.oncontextmenu ...

  2. SQLServer局部变量和全局变量介绍05-29学习笔记

    变量 数据在内存中存储可以变化的量叫变量.为了在内存中存储信息,用户必须指定存储信息的单元,并为了该存储单元命名, 以方便获取信息,这就是变量的功能.Transact-SQL可以使用两种变量,一种是局 ...

  3. 记录第一次在egret项目中使用Puremvc

    这几天跟着另一个前端在做一个小游戏,使用的是egret引擎和puremvc框架,这对于我来说还是个比较大的突破吧,特此记录下. 因为在此项目中真是的用到了mvc及面向对象编程,值得学习 记录第一次在e ...

  4. js 中的定时器

    在js中的定时器分两种:1.setTimeout() 2.setInterval() 1.setTimeOut() 只在指定时间后执行一次 /定时器 异步运行 function hello(){ al ...

  5. 设计模式 Singleton 单例 懒汉,线程安全

    首先来明确一个问题,那就是在某些情况下,有些对象,我们只需要一个就可以了, 比如,一台计算机上可以连好几个打印机,但是这个计算机上的打印程序只能有一个, 这里就可以通过单例模式来避免两个打印作业同时输 ...

  6. MaBatis配置(单配置 之一)

    注: 此文中的实体类还是沿用上一章的Emp和Dept两个类 .引入需要的jar包文件:http://pan.baidu.com/s/1qYy9nUc :mybatis-3.2.2.jar .编写MyB ...

  7. Leetcode0143--Reorder List 链表重排

    [转载请注明]https://www.cnblogs.com/igoslly/p/9351564.html 具体的图示可查看 链接 代码一 /** * Definition for singly-li ...

  8. sql server 数据分析优化实战(一)——SQL语句优化

    前言 在我们进行数据分析的时候,首要的目标是根据业务逻辑,通过编写SQL代码得到我们想要的结果,这是毋庸置疑的.一般情况下,由于我们分析的数据量比较少,体会不出SQL语句各种写法的性能优劣,对SQL代 ...

  9. JS高级——缓存原理

    缓存的原理 1.就是将常用的数据存储起来,提供便利,减少查询次数和所消耗的事件 2.利用作用的原理所产生的数据库:非关系型数据库(内存型数据库) MongoDB.Redis等 3.还有网站静态页面缓存 ...

  10. SQL基本操作——函数

    函数的类型:在 SQL 中,基本的函数类型和种类有若干种.函数的基本类型是:Aggregate 函数.Scalar 函数. Aggregate 函数:操作面向一系列的值,并返回一个单一的值,下面是SQ ...