Nodejs与包管理工具安装：
Windows安装：
下载安装包安装就可以。
Ubuntu安装：
//安装nodejs sudo apt-get install nodejs //安装包管理工具 sudo apt-get install npm
安装结果确认：
~/dev/devtest$ node --version v8.11.1 ~/dev/devtest$ npm --version 5.8.0
快捷通道（Vue-cli方法）：
//设置npm仓库镜像为国内淘宝镜像 npm config set registry https://registry.npm.taobao.org //查看配置是否成功 npm config get registryf //全局安装 webpack npm install -g webpack //全局安装 vue-cli npm install -g vue-cli //创建一个基于webpack模板的项目 vue init webpack my-project cd my-project npm install //这一步看着简单，实际上都在配置文件里面配好了，可以去研究一下 npm run dev
自动生成的目录结构：
手动设置：
1，初始化与安装WebPack
// 进入文件夹，初始化设置 npm init -y // Webpack和服务器安装 npm i webpack webpack-cli webpack-dev-server --save-dev
2，添加简单代码测试
webpack.config.js：
const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.join(__dirname, 'dist') }, devServer: { contentBase: path.join(__dirname, 'dist') }, }
dist/index.html：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> Hello World </body> </html>
src/index.js 空文件
启动确认：
npx webpack-dev-server
3, 引入Vue
// VUE安装 npm i vue --save // VUE单独文件处理的Loader安装 npm i vue-loader vue-template-complier vue-style-loader css-loader --save-dev
Vue单文件组件与Loader设置
//webpack.config.js const path = require('path'); const VueLoaderPlugin = require('vue-loader/lib/plugin'); module.exports = { mode: 'development', entry: './src/index.js', output: { filename: 'bundle.js', path: path.join(__dirname, 'dist') }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } }, module: { rules: [{ test: /.css$/, use: [ 'vue-style-loader', 'css-loader' ] }, { test: /.vue$/, loader: 'vue-loader', options: { loaders: { 'scss': [ 'vue-style-loader', 'css-loader', 'sass-loader' ], 'sass': [ 'vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax' ] } } } ] }, devServer: { contentBase: path.join(__dirname, 'dist') }, plugins: [ new VueLoaderPlugin() ], devtool: '#eval-source-map' }
4,Vue单文件组件测试
<!-- dist/index.html--> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="./bundle.js"></script> <title></title> </head> <body> <div id="app"></div> </body> </html>
// src/index.js import Vue from 'vue'; import App from './components/App.vue'; window.onload = function() { new Vue({ el: '#app', template: '<app></app>', components: { App } }) }
//src/components/App.vue <template> <div> <header-component></header-component> <p class="blue">This is App component.</p> </div> </template> <script> import Header from './Header.vue'; export default { components:{ 'header-component':Header } } </script> <style> .blue{ color: blue; } </style>
//src/components/Header.vue <template> <div> <p class="title">{{title}}</p> </div> </template> <script> export default { data:function(){ return{ title:'This is Header component' } } } </script> <style> .title{ font-size: 20px; font-weight: bold; } </style>
启动服务查看结果：
webpack.config.js说明：
//修改webpack.config.js var path = require('path'); var webpack = require('webpack'); module.exports = { entry: './src/main.js', // 项目的入口文件，webpack会从main.js开始，把所有依赖的js都加载打包 output: { path: path.resolve(__dirname, './dist'), // 项目的打包文件路径 publicPath: '/dist/', // 通过devServer访问路径 filename: 'build.js' // 打包后的文件名 }, devServer: { historyApiFallback: true, overlay: true } }; //修改package.josn //webpack-dev-server会自动启动一个静态资源web服务器 --hot参数表示启动热更新 "scripts": { "dev": "webpack-dev-server --open --hot", "build": "webpack --progress --hide-modules" }, //运行 //浏览器自动打开的一个页面，随意修改js，浏览器会自动刷新 npm run dev //编译 npm run build
Load配置说明：
//webpack默认不支持转码es6，但是import export这两个语法却单独支持 //webpack默认只支持js的模块化，如果需要把其他文件也当成模块引入，就需要相对应的loader解析器//webpack.config.js var path = require('path'); var webpack = require('webpack'); module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'build.js' }, devServer: { historyApiFallback: true, overlay: true }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } }, module: { rules: [ { test: /.css$/, use: [ 'vue-style-loader', 'css-loader' ], } ] } }; //匹配后缀名为css的文件,然后分别用css-loader，vue-style-loader去解析 解析器的执行顺序是从下往上(先css-loader再vue-style-loader) //我们这里用vue开发，所以使用vue-style-loader，其他情况使用style-loader
打包发布：
// 对文件进行压缩，缓存，分离等等优化处理//修改package.json "scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" } //修改webpack.config.js，判断NODE_ENV为production时，压缩js代码 var path = require('path'); var webpack = require('webpack'); module.exports = { // 省略... } if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map'; module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin(), ]) }
module: { //加载器配置 loaders: [ //.css 文件使用 style-loader 和 css-loader 来处理 { test: /.css$/, loader: 'style-loader!css-loader' }, //.js 文件使用 jsx-loader 来编译处理 { test: /.js$/, loader: 'jsx-loader?harmony' }, //.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理 { test: /.scss$/, loader: 'style!css!sass?sourceMap'}, //图片文件使用 url-loader 来处理，小于8kb的直接转为base64 { test: /.(png|jpg)$/, loader: 'url-loader?limit=8192'} ] }