1、前提：安装node，npm，全局安装webpack
2、执行npm install -g cnpm --registry=https://registry.npm.taobao.org，之后用cnpm安装，从淘宝服务器下载
3、执行npm init -y ,创建package.json
4、安装组件，执行
cnpm install --save-dev webpack webpack-dev-server babel-core babel-loader vue vue-loader@14.2.3 vue-html-loader vue-template-compiler css-loader
tips:vue-loader版本问题比较多，用了14.0,3会报错，默认安装最新版本15也会报错，需要额外添加配置
我要评论
// webpack.config.js
const { vueloaderplugin } = require('vue-loader')
module.exports = {
// ...
plugins: [
new vueloaderplugin()
]
}
我这里用了14.2.3，不用添加配置，直接可以使用
5、添加文件
根目录下新建webpack.config.js
//webpack.config.js
const webpack = require('webpack');
module.exports = {
entry: __dirname + "/src/main.js",//唯一入口文件
output: {
path: __dirname + "/dist",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
},
devserver: {
contentbase: "./",//本地服务器所加载的页面所在的目录
historyapifallback: true,//不跳转
inline: true//实时刷新
},
module: {
rules: [
//解析vue后缀文件
{test: /\.vue$/, loader: 'vue-loader'},
//用babel解析js文件 排除模块安装目录的文件
{test: /\.js$/, loader: 'babel-loader',exclude: /node_modules/}
]
}
}
根目录下新建
<script src="dist/bundle.js"></script>
根目录下新建文件夹src，存放main.js和vue组件
//main.js
import vue from 'vue';
import app from './app.vue';
new vue({
el:'#app',
components: {app},
render: h => h(app),
mounted:function(){console.log(‘hello world’)}
})
//app.vue
hello world!!
<script> export default{ name:"app" } </script>
根目录下新建文件夹dist，存放编译好的js文件
执行webpack命令，查看dist目录下是否生成了bundle.js
更改操作命令，package.json的scripts选项添加
"start": "webpack", "server": "webpack-dev-server --open --mode development"
tips:start这个命令比较特殊，npm start就能执行，其他命令都需要npm run +具体命令才能执行，例如npm run server启动服务器,具体改成什么命令看个人喜好了
6、输入npm run server启动服务器，至此webpack基本功能已经实现。
修改main.js和vue文件，保存，发现服务器并没有热更新，查了下vue-loader已经集成这个功能，只需要webpack.config.js的output添加
publicpath: 'dist/'
，检测这个目录有变化就自动更新显示
loader种类还有很多，根据项目实际需要添加，例如sass-loader,less-loader,url-loader,file-loader,json-loader
抄了一句对loader的描述。loaders是webpack提供的最激动人心的功能之一了。通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss为css，或者把下一代的js文件（es6，es7)转换为现代兼容的js文件，对react的开发而言，合适的loaders可以把react的中用到的jsx文件转换为js文件。
如对本文有疑问， 点击进行留言回复！！
荐 css的3中水平居中方式和4中水平垂直居中方式及应用情形速记
网友评论