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连续滚动幻灯片:原理与实现

    什么是连续滚动幻灯片?打开一些网站的首页,你会发现有一块这样的区域:一张图片,隔一段时间滑动切换下一张:同时,图片两端各有一个小按钮,供你手动点选下一张:底部有一排小圆圈,供你选定特定的某帧图片.这就 ...

  2. [Swift通天遁地]三、手势与图表-(7)创建饼形图表并导出图表为PNG图片

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  3. CyclibcBarrier与CountDownLatch区别

    1.CyclibcBarrier的线程运行到某个位置后即停止运行,直到所有的线程都到达这个点,所有线程才开始运行:CountDownLatch是线程运行到某个点后,计数器-1,程序继续运行即Cycli ...

  4. 洛谷2019 3月月赛 T3

    题干 唯一AC T3 的大巨佬%%% 这题就是个大模拟吧. 题解

  5. 用Python一键搭建Http服务器的方法

    用Python一键搭建Http服务器的方法 Python3请看 python -m http.server 8000 & Python2请看 python -m SimpleHTTPServe ...

  6. CSS怎样改变行内样式(通过外部级联样式表) css !important用法CSS样式使用优先级判断

    CSS样式优先级 行内>内部>外部 使用!important的css定义是拥有最高的优先级的.只是在ie6下出了一点小的bug,注意书写方式一般可以轻松避开的. CSS中的!importa ...

  7. web api初学

    据说web api的作用和wcf的一样,只是比wcf更简单而已,具体如何我也不清楚,毕竟不是做学术研究的,我只是通过简单的例子来学习web api.能做的只需要知其然,不必管其所以然.当然有兴趣的可以 ...

  8. Hadoop Hive概念学习系列之hive与依赖环境的交互(二十一)

    hive与环境的交互,算是一个小知识点,但掌握不菲! 如何在hive里,也达到这样呢? 不需要这样啦,因为,hive是建立在hadoop之上,启动hive,相当于,就是,hadoop jar ** h ...

  9. 通过HTTP协议实时获取微信聊天记录

    第一步:登陆 1.get访问微信首页https://wx.qq.com 提供session.headers 用途:获取cookie 后续访问必须带session.headers.cookie这三个参数 ...

  10. CF831C Jury Marks

    思路: 关键在于“插入”一个得分之后,其他所有得分也随之确定了. 实现: #include <iostream> #include <cstdio> #include < ...