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'} ] }