刚才是接触webpack时总会再配置文件那卡住，有时甚至花费1天的时间，有时甚至找不出问题所在。所以总结一下在项目使用遇到的问题，也为自己记录下来。
什么是webpack，webpack有什么好处，能做什么，自己搜搜就知道了。
首先，确定电脑中安装了nodeJS，npm，最好安装一下淘宝镜像，国内的网速，您懂的。好了，正式开始了
开始安装
1，打开cdm命令，选择需要新建的项目位置，新建一个新文件夹webpack-demo，输入下面
//新建package.json文件 跟着提示一步一步来
npm init
npm install -g webpack # 全局安装依赖
npm install webpack --save-dev #安装到当前所在的文件夹
2，在文件夹中新建一个文件src，再在src中新建两个文件如index和components两个文件，再index中新建index.html文件和index.js文件，在components里面见a.vue（本文以vue框架为例，react同样也可以），现在文件如下：
项目结构.png
index.html文件代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
</body>
</html>
3，新建webpack.config.js配置文件
webpack拥有很多功能主要是通过loaders和plugins来实现的（后面会介绍常用的loaders和plugins）。我们主要通过配置webpack.config.js文件来控制webpack。新建webpack.config.js，文件如下：
var path = require('path');
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.join(ROOT_PATH, 'src/index'); //__dirname 中的app目录，以此类推
var APP_FILE = path.join(APP_PATH, 'index.js'); //根目录文件index.js地址
var BUILD_PATH = path.join(ROOT_PATH, '/public'); //发布文件所存放的目录
module.exports = {
// 入口文件
entry: path.join(__dirname, './src/index/index.js'),
// 输出配置
output: {
// 输出路径
path: path.join(__dirname, './public'),
filename: '[name].js'
},
}
现在再命令行输入webpack
输入webpack命令.png
这时会发现项目结构为
项目结构.png
好神奇！竟然多了一个public文件。
4，使用webpack构建本地服务器 webpack-dev-server
npm install --save-dev webpack-dev-server
(如果安装了淘宝镜像，可以用cnpm代替npm这样安装速度会快很多）
再webpack.config文件添加命令，如下
var path = require('path');
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.join(ROOT_PATH, 'src/index'); //__dirname 中的app目录，以此类推
var APP_FILE = path.join(APP_PATH, 'index.js'); //根目录文件index.js地址
var BUILD_PATH = path.join(ROOT_PATH, '/public'); //发布文件所存放的目录
module.exports = {
// 入口文件
entry: path.join(__dirname, './src/index/index.js'),
// 输出配置
output: {
// 输出路径
path: path.join(__dirname, './public'),
filename: '[name].js'
},
devServer: {
contentBase: "./public", //本地服务器所加载的页面所在的目录
colors: true, //终端中输出结果为彩色
historyApiFallback: true, //不跳转
inline: true //实时刷新
}
}
5，按时安装loaders了
所有的loaders需要单独安装并且要再webpack.config文件的配置。可以用下面的代码来安装loader
npm install xxx-loader --save
或者
npm install xxx-loader --save-dev
安装依赖项
npm install autoprefixer babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-runtime --save-dev
css/less/sass
npm install style-loader css-loader less less-loader node-sass sass-loader --save-dev
图片、字体、json文件依赖
npm install file-loader json-loader url-loader --save-dev
vue依赖
npm install vue-hot-reload-api vue-html-loader vue-loader vue-style-loader vue-template-compiler --save-dev
npm install vue --save
可以根据自己的项目增加或者删除loaders
6，Plugins
cnpm install extract-text-webpack-plugin html-webpack-plugin --save-dev
7，webpack.config文件配置
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin'); //生成html
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.join(ROOT_PATH, 'src/index'); //__dirname 中的app目录，以此类推
var APP_FILE = path.join(APP_PATH, 'index.js'); //根目录文件index.js地址
var BUILD_PATH = path.join(ROOT_PATH, '/public'); //发布文件所存放的目录
module.exports = {
// 入口文件
entry: {
index: APP_FILE
},
// 输出配置
output: {
// 输出路径
path: BUILD_PATH, // 输出文件的保存路径
filename: '[name].[hash:5].js' // 输出文件的名称
},
resolve: {
extensions: ['', '.js', '.vue', '.scss', '.css'], //后缀名自动补全
alias: {
'Vue': 'vue/dist/vue.js'
}
},
module: {
loaders: [
// 使用vue-loader 加载 .vue 结尾的文件
{
test: /\.vue$/,
exclude: /^node_modules$/,
loader: 'vue'
}, {
test: /\.json$/,
exclude: /^node_modules$/,
loader: "json"
}, {
test: /\.css$/,
exclude: /^node_modules$/,
loader: ExtractTextPlugin.extract('style', ['css', 'autoprefixer'])
}, {
test: /\.scss$/,
exclude: /^node_modules$/,
loader: ExtractTextPlugin.extract('style', ['css', 'autoprefixer', 'sass'])
}, {
test: /\.(png|jpg)$/,
exclude: /^node_modules$/,
loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
}, {
test: /\.(eot|woff|svg|ttf|woff2|gif|appcache)(\?|$)/,
exclude: /^node_modules$/,
loader: 'file-loader?name=[name].[ext]'
}, {
test: /\.js$/,
exclude: /^node_modules$/,
loader: 'babel'
}
]
},
Favlist: {
loaders: {
js: 'babel'
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development') //定义编译环境
}
}),
new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML
filename: './index.html', //生成的html存放路径，相对于 path
template: './src/index/index.html', //html模板路径
hash: false,
}),
new ExtractTextPlugin('[name].css')
],
devServer: {
contentBase: "./public", //本地服务器所加载的页面所在的目录
colors: true, //终端中输出结果为彩色
historyApiFallback: true, //不跳转
inline: true //实时刷新，
}
}
特别注意的是在vue2.0以上版本需要如下设置，不然汇报错
resolve: {
alias: {
'Vue': 'vue/dist/vue.js'
}
}
ok这是以上的配置，现在我们来做一个简单的示例吧。
在components新建一个a.vue文件，代码如下
<template id="template-home">
<div>It is a webpack demo</div>
</template>
<style>
body {
color: red;
backgruond:#ccc;
}
</style>
再index.js中写入下面代码：
import Vue from 'Vue'
import Child from '../components/a.vue'
new Vue({
el: '#app',
components: {
'my-component': Child
}
});
index.html代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>webpack-demo</title>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
</body>
</html>
然后在控制台运行webpack看目录的变化，然后再运行webpack-dev-server，再浏览器打开：localhost:8080
github：https://github.com/sherely/webpack-vue
网友评论