webpack2.0简单配置教程
以前习惯用gulp+less来开发项目，由于公司项目用的vue开发的，所以学下webpack这个打包工具。以下是我学习时的笔记，希望给在webpack配置过程中遇到麻烦的朋友一丝帮助。
目前只配置了sass,css,js,html,es6,图片编译，字体引入，热加载这几项，简单项目已经够用。
如果深入webpack可以配置很多，原谅我也只是初次配置
1.首先建一个自己的项目文件夹，npm init -y快速生成一个配置文件
2. npm i webpack -D 本地安装webpack
3. npm i webpack-dev-server -g 全局安装webpack-dev-server
4. npm i webpack-dev-server -D 添加到package.json文件里
5.以下是我的package.json，里面的包都是常用的
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-latest": "^6.0.0",
"cross-env": "^3.0.0",
"css-loader": "^0.28.0",
"file-loader": "^0.9.0",
"extract-text-webpack-plugin": "^2.1.0",
"html-webpack-plugin": "^2.28.0",
"node-sass": "^4.5.2",
"sass-loader": "^6.0.3",
"style-loader": "^0.16.1",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.4.2"
}
}
根目录下的webpack.config.json
// html压缩
var HtmlWebpackPlugin = require('html-webpack-plugin');
// js css分离
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path')
var webpack = require('webpack') module.exports = {
// 配置入口文件
entry: {
build: './src/main.js'
}, // 配置输出路径
output: {
path: path.resolve(__dirname, './dist'),
// publicPath: '/dist/',//指定资源引用目录
filename: '[name].js'
}, // loader模块配置
module: {
loaders: [
// js 文件
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
// css 文件
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
//解析.scss文件
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "sass-loader"]
})
},
// 字体
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
},
// 图片
{
test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
loader: 'file-loader',
query: {
name: '[name].[ext]?[hash]'
}
}
]
},
// 插件配置
plugins: [
new HtmlWebpackPlugin({
template: './index.html' // 模版文件
}),
new ExtractTextPlugin({
filename: 'style.css'
/*filename: (getPath) => {
return getPath('dist/[name].css').replace('dist','css')
}*/
})
],
// webpack-dev-server 热加载
devServer: {
historyApiFallback: true,
noInfo: true
},
devtool: '#eval-source-map'
}
.babelrc文件
{
"presets": [
["latest", {
"es2015": { "modules": false }
}]
]
}
index.html移入编译后的文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="dist/styls.css">
<script src="dist/build.js"></script>
</head>
<body>
<h1>hello</h1>
<h2>hello</h2>
<p>hello <span>hello world</span></p>
</body>
</html>
我的项目目录
main.js里面移入所有需要打包的文件
import {hello,hello1} from './script/hello1';
import {demo} from './script/hello';
import './style/hello.css';
import './style/hello.scss';
命令行npm start 启动项目 npm run build 编译项目
我托管到了github,有兴趣的同学可以参考下:https://github.com/wmui/webpack-demo
webpack2.0简单配置教程的更多相关文章
- Linux下的GitHub安装与简单配置教程 ~ 转载
Linux下的GitHub安装与简单配置教程 1.GitHub简介 Git是一个分布式版本控制系统,与其相对的是CVS.SVN等集中式的版本控制系统. 2.Git的安装 1)安装Git a.查看与 ...
- hadoop 2.0 详细配置教程(转载)
转载: http://www.cnblogs.com/scotoma/archive/2012/09/18/2689902.html 作者:杨鑫奇 PS:文章有部分参考资料来自网上,并经过实践后写出, ...
- entity framework core 2.0 & sqlite 配置教程
我用的是vs2017,需要下载.net core 2.0 sdk. .net core 下载地址:点我下载 1.在Visual Studio之中创建一个.net core的控制台项目 2.修改cspr ...
- Ubuntu 14.04 64bit下Caffe + Cuda6.5/Cuda7.0 安装配置教程
http://www.embeddedlinux.org.cn/emb-linux/entry-level/201612/21-6005.html 随着深度学习快速发展的浪潮,许多有兴趣的工作者都转入 ...
- Linux下的GitHub安装与简单配置教程
1.GitHub简介 Git是一个分布式版本控制系统,与其相对的是CVS.SVN等集中式的版本控制系统. 2.Git的安装 1)安装Git a.查看与使用 在ubuntu下可以使用如下命令进行查看系统 ...
- hadoop 2.0 详细配置教程
http://www.cnblogs.com/scotoma/archive/2012/09/18/2689902.html
- iis8.0 https配置教程
打开iis>选择左侧根>点击右侧服务器证书 打开界面后 空白处点击右键选择导入 成功导入证书 选择需要绑定证书的网站点击选择>编辑绑定>ssl证书请选择您导入的证书 点击SSL ...
- struts2.0简单教程
Struts2.0简单配置教程: 在Eclipse中配置Struts2 步骤一:首先打开java ee并建立一个动态网站项目,我建立的项目名为TestDemo,如下图: 建立之后可在左侧发现工程,展开 ...
- 简单vue项目脚手架（vue+webpack2.0+vuex+vue-router）
github地址 使用技术栈 webpack(^2.6.1) webpack-dev-server(^2.4.5) vue(^2.3.3) vuex(^2.3.1) vue-router(^2.5.3 ...
随机推荐
- ReportNG测试报告的定制修改（二）
上一篇文章修改了一些基本的ReportNG信息,链接:https://www.cnblogs.com/mrjade/p/9912073.html,本文将继续带大家进行修改,重点是添加饼图 1.修改测试 ...
- Ubuntu和Busybox下用make menuconfig配置出错解决
http://blog.csdn.net/satiling/article/details/6965985 # make menuconfig In file included from script ...
- 转载：[Mitbbs]FB的intern和准备的经历
今天中午刚收到f家的intern offer, 超级开心.在这个版块看了很多也收获很多. onsite前天晚上面就就对自己过了一定发个帖跟需要的人分享下自己的经历.论坛上帖 子看了很多,很多拿了FLA ...
- axel命令 文件下载
axel是Linux下一个不错的HTTP/ftp高速下载工具.支持多线程下载.断点续传,且可以从多个地址或者从一个地址的多个连接来下载同一个文件.适合网速不给力时多线程下载提高下载速度.比如在国内VP ...
- ThinkPHP框架快捷键使用说明
ThinkPHP框架快捷键使用说明 php mvc框架ThinkPHP中有很多快捷键,但是很多时候我们不太明白它的意思,下面我简单的列了下他们的含义: A快速实例化Action类库 B执行行为类 C配 ...
- 【动软.Net代码生成器】连接MySQL生成C#的POCO实体类（Model）
首先是工具的下载地址: 动软.Net代码生成器 该工具官网自带完整教程: 文档:http://www.maticsoft.com/help/ 例子:http://www.maticsoft.com/h ...
- Java类型的生命周期
以上就是我今天没有总结学习类加载器时候对类加载器仅有的知识,虽然有个大概印象,但是还是有点模糊.今天一口气总结一下,参考文献我就不列举了.本文不生产知识,只是知识的搬运工. 静态.class文件到内存 ...
- linux性能评估与分析工具
linux是一个开源系统,其内核负责管理系统的进程,内存,设备驱动程序,文件和网络系统, 决定着系统的性能和稳定性.由于内核源码很容易获取,任何人都可以将自己认为优秀的代码 加入到其中.linux默认 ...
- git中文乱码解决方案
解决方案: 在bash提示符下输入: git config --global core.quotepath false core.quotepath设为false的话,就不会对0x80以上的字符进行q ...
- [转]RosBridge小结
1.rosbridge介绍 rosbridge(rosbridge_suite)是ros官方为开发者提供的一个用于非ros系统和ros系统进行交互通信的功能包.rosbridge主要包含两个部分,Ro ...