记一个简单的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 ...
随机推荐
- 禁用backspace网页回退功能
<script language="JavaScript">document.onkeydown = check;function check(e) { var cod ...
- [App Store Connect帮助]一、 App Store Connect 使用入门(1)App Store Connect 工作流程
您使用 App Store Connect 提交并管理您在 App Store 中销售的 App,使用 TestFlight 分发您 App 的 Beta 版本,接受法律协议,输入您的税务和银行业务信 ...
- Visual Studio Code配置GitHub(Win7环境)
一.软件环境说明(演示环境) 1.操作系统:Windows7旗舰版(64bit) 2.Visual Studio Code版本:1.32.3 3.Git版本:2.21.0.windows.1 二.软件 ...
- 蛤玮学计网 -- 简单的判断ip
心累 , 狗日的想了好多数据 , ......啥也不说了 我去哭一会 . #include<stdio.h> #include<string.h> #include<m ...
- 数塔问题mod 100(orz)
看一下题目 和普通的数字三角形看似没啥区别(区别很大) 然后去想:DP方程 DP[i][j]=Max(DP[i-][j],DP[i-][j-])+a[i][j] ans=Max(DP[n][..n]) ...
- [转] 64位Oracle 11g R2的客户端连接时报ORA-01019错误
本文转自:http://blog.csdn.net/downmoon/article/details/8038583 在Win8企业版64位环境下,连接Oracle11g 服务端,搞了整整两天,特将过 ...
- vue-cli 打包优化
1. 优化打包体积 先上2个图 (上图A是优化前的各个js大小对比视图,下图B是优化后,还未完全优化完成的,不过也可以看得出来对比) 图A是3个压缩文件,包括部分图片和使用的所有js,体积都偏大 图B ...
- 从"嘿,今晚..."谈消息安全传输中的技术点
一.初级阶段:信息裸传 特点:在网络上传递明文 黑客定理一:网络上传递的数据是不安全的,属网络于黑客公共场所,能被截取 结果:传递明文无异于不穿衣服裸奔 改进方案:先加密,再在网络上传输 二.进阶阶段 ...
- firefox 附加组件栏安装
firefox 在升级到 30的版本后,发现附加组件栏不兼容了. 搜索组件,add-on bar 会得到一个 new add-on bar的组件,安装完后发现上面不显示ip, 后来才发现,应该安装Th ...
- oracle sql*loader的使用
用法: SQLLDR keyword=value [,keyword=value,...] 有效的关键字: userid -- ORACLE 用户名/口令 control -- 控制文件 ...