webpack4.x 快速搭建vue开发环境

webpack version: 4.x

1. 初始化项目(如果不需要特殊的设置可以加上 -y 参数可直接生成 package.json) macOS和linux需要加sudo

npm init

2. 安装各种需要的包和loader

npm install webpack  webpack-cli webpack-dev-server babel-core babel-loader babel-preset-es2015 babel-preset-stage-0 css-loader style-loader file-loader url-loader html-webpack-plugin vue vue-router vue-loader vue-template-compiler   --save-dev

这其中包括了css js html image vue 各种文件的 loader

3. 新建 webpack.config.js 文件(名称必须是这个) 并且 配置这个文件

/*** webpack config file*/const HtmlWebpackPlugin = require("html-webpack-plugin");const path = require("path");const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {entry: "./src/index.js",output: {filename: 'bundle.js',path: path.resolve("./dist"),},module: {rules: [// .js 文件处理 loader{test: /\.js$/,use: 'babel-loader',exclude: /node_modules/},// .css 文件处理 loader{test: /\.css$/,use: ['style-loader', 'css-loader']},// 图片文件处理 loader{test: /\.(jpg|png|gif|jpeg)/,use: 'url-loader?limit=8192'},// .vue 文件处理 loader{test: /\.vue$/,use: 'vue-loader'}]},// 插件plugins: [new HtmlWebpackPlugin({templalte: './src/index.html'}),new VueLoaderPlugin(),],mode: 'production'
};

4. 在 package.json 文件中配置scripts

 "scripts": {"build": "webpack","dev": "webpack-dev-server --mode development"},

5. 启动测试,看服务是否启动成功,如果成功,到浏览器中访问提示的url 一般是 http://localhost:8080

npm run dev