记一个简单的webpack.config.js
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的更多相关文章
- webpack3中文版使用参考文档--全面解析webpack.config.js
Webpack目前官方发布的最新版本是3.1.0,相对于2.0的怎么本,在语法上没有变动,只是新增了功能.使用webpack,需要事先安装node.js,并对node.js生态有一些基本的了解,比如( ...
- 从0构建webpack开发环境(一) 一个简单webpack.config.js
本文基于webpack4.X,使用的包管理工具是yarn 概念相关就不搬运了,直接开始 首先项目初始化 mkdir webpack-demo && cd webpack-demo ya ...
- webpack.config.js 参数简单了解
webpack.config.js文件通常放在项目的根目录中,它本身也是一个标准的Commonjs规范的模块. var webpack = require('webpack'); module.exp ...
- react webpack.config.js 入门学习
在学习react 的时候必然会用到webpack打包工具,webpack的快速入门另外一篇文章中有记录,这里只记录webpack.config.js文件,因为每个项目下都必须配置,通俗的讲,它的作用就 ...
- webpack配置:less/sass文件打包和分离、自动处理css前缀、消除未使用的css及完整的webpack.config.js文件
一.less文件打包和分离 1.要使用less,首先使用npm安装less服务:还需要安装Less-loader用来打包使用. npm install less --save-dev npm inst ...
- 从零开始配置一个简单的webpack打包
一.基础配置 1.创建一个名为demo-webpack的文件夹(名称随意) 2.初始化一个package.json文件 //在cmd窗口中使用以下命令快速创建 npm init -y 3.安装webp ...
- webpack(4)webpack.config.js配置和package.json配置
前言 上一篇文章我们使用webpack打包成功了,但是每次都要自己手动输入打包的文件地址和打包到哪里去的地址,非常麻烦,所以这里介绍使用配置文件进行打包 webpack.config.js 首先我们创 ...
- webpack教程(二)——webpack.config.js文件
首先我们需要安装一个webpack插件html-webpack-plugin,该插件的作用是帮助我们生成创建html入口文件.执行如下命令 npm install html-webpack-plugi ...
- [js高手之路]深入浅出webpack系列2-配置文件webpack.config.js详解
接着上文,重新在webpack文件夹下面新建一个项目文件夹demo2,然后用npm init --yes初始化项目的package.json配置文件,然后安装webpack( npm install ...
随机推荐
- Knights of the Round Table(Tarjan+奇圈)
http://poj.org/problem?id=2942 题意:n个武士,某些武士之间相互仇视,如果在一起容易发生争斗事件.所以他们只有满足一定的条件才能参加圆桌会议:(1)相互仇视的两个武士不能 ...
- codevs1486愚蠢的矿工(树形dp)
1486 愚蠢的矿工 时间限制: 1 s 空间限制: 128000 KB 题目描述 Description Stupid 家族得知在HYC家的后花园里的中央花坛处,向北走3步,向西走3步, ...
- The Preliminary Contest for ICPC China Nanchang National Invitational I.Max answer单调栈
题面 题意:一个5e5的数组,定义一个区间的值为 这个区间的和*这个区间的最小值,注意数组值有负数有正数,求所有区间中最大的值 题解:如果全是正数,那就是原题 POJ2796 单调栈做一下就ok 我们 ...
- Akka源码分析-Persistence-AtLeastOnceDelivery
使用过akka的应该都知道,默认情况下,消息是按照最多一次发送的,也就是tell函数会尽量把消息发送出去,如果发送失败,不会重发.但有些业务场景,消息的发送需要满足最少一次,也就是至少要成功发送一次. ...
- 写出更好的 JavaScript 条件语句
1. 使用 Array.includes 来处理多重条件 // 条件语句 function test(fruit) { if (fruit == 'apple' || fruit == 'strawb ...
- NS2学习笔记(二)
Tcl语言 变量和变量赋值 set a "Hello World!" #将字符串赋值给变量a puts "NS2 say $a" #输出字符串的内容,其中$a表 ...
- JavaScript--引用JS外部文件
通过前面知识学习,我们知道使用<script>标签在HTML文件中添加JavaScript代码,如图: JavaScript代码只能写在HTML文件中吗?当然不是,我们可以把HTML文件和 ...
- 浏览器被“hao123.3377.com”主页劫持的解决办法
问题描述: 浏览器被一个叫做hao123.3377的类似hao123网址导航的家伙,强行贴上.狗皮膏药一样. 问题解决: 尝试了网上说的包括下载360什么的,都不咋好用.后来发现是在激活win10(盗 ...
- STMP服务器发送邮件,本地可以发送但是服务器一直发送不成功;
在官网上查看到信息 考虑到部分云服务商封禁了其内网对外 25 端口的访问, xxxxx 端口号: 2525 xxxxx 端口号: 587 然后,我换了一下端口号就行了,浪费了我三个小时时间,贼尴尬:
- 开始玩qt,使用代码修改设计模式生成的菜单
之前制作菜单时,不是纯代码便是用设计模式 直接图形化完成. 今天我就是想用代码修改已经存在的菜单项,如果是用代码生成的可以直接调用指针完成: 但通过设计模式完成的没有暴露指针给我,至少我没发现. 在几 ...