vue+webpack环境搭建精简篇

一、新建项目目录

1. 例如 vue_webpack
2. npm init -y
3. 创建 dist、src 文件夹；src 中创建 index.html、main.js
4. 项目目录 npm i webpack --save-dev 安装webpack
5. 项目目录 npm i webpack-dev-server -D 安装webpack-dev-server
6. 项目根目录新建 webpack.config.js

   //这个配置文件，就是一个 JS 文件，通过 Node 中的模块操作，向外暴露了一个配置对象
   const path = require('path')
   module.exports = {
       entry: path.join(__dirname,'./src/main.js'), //入口
       output:{
           path: path.join(__dirname,'./dist'), //指定打包好的文件输出的目录
           filename: 'bundle.js' //指定输出的文件名称
       }
   }
   

7. 编辑根目录的 package.json 文件，在scripts中添加dev ： "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"

插件安装

• 项目根目录cmd:

1. npm i html-webpack-plugin -D
   webpack.config.js:

//导入插件;只要是插件，都要放到 plugin 节点中去
const htmlWebpackPlugin = require('html-webpack-plugin')

...,
plugins: [ //配置插件的节点
	new htmlWebpackPlugin({ //内存中生成html的插件
		template: path.join(__dirname,'./src/index.html'), //指定模板页面，会根据指定的页面路径，去生成内存中的页面
		filename: 'index.html' //指定生成的页面名称，可重新命名
	})
]

2. npm i style-loader css-loader -D //安装处理css的loader
3. npm i less-loader -D //安装处理css的loader; npm i less -D//less 是less-loader的内部依赖
4. npm i sass-loader -D npm i node-sass -D
5. npm i url-loader file-loader -D //file-loader 为内部依赖

webpack.config.js 配置文件，新增一个配置节点为 module

plugins:[],
module:{ //这个节点配置所有的第三方模块 加载器
	rules: [ //所有第三方模块的匹配规则
		{test: /\.css$/, use:['style-loader','css-loader']},
        {test: /\.less$/, use:['style-loader','css-loader','less-loader']},
        {test: /\.scss$/, use:['style-loader','css-loader','sass-loader']},
        {test: /\.(jpg|png|gif|bmp|jpeg)$/, use:'url-loader?limit=7631&name=[hash:8]-[name].[ext]'},
		{test: /\.{ttf|eot|svg|woff|woff2}$/, use:'url-loader'} //解析字体
	]
}

webpack 中 babel 的配置

1. npm i babel-core babel-loader babel-plugin-transform-runtime -D
2. npm i babel-preset-env babel-preset-stage-0 -D
3. 在webpack配置文件，在module节点下的rules数组中，添加一个新的匹配规则：
   {test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
4. 在根目录新建 .babelrc 的Babel配置文件

{
	"presets":["env","stage-0"],
	"plugins":['transform-runtime']
}

最后，注意webpack版本的问题！

• 如果需要详细知道搭建步骤及意义，请看详解篇，如下：
• 从零搭建vue2+webpack3项目-上
• 从零搭建vue2+webpack3项目-下