webpack开发环境的搭建

1. 创建一个文件夹

我这里创建的是webpack-vue

2.安装webpack和初始化

cnpm i webpack -g
cnpm i webpack --save-dev
npm init -y

命令完成后，会多出两个文件夹

如果在package.json中的"dependencies": {}里出现很多奇奇怪怪的依赖，全部删除即可

3.webpack配置文件（webpack.config.js）

创建一个.js文件

const path=require('path')
//引入插件类
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
//新建插件对象
const htmlPlugin=new HtmlWebpackPlugin({
    template:path.join(__dirname,'./src/index.html'),
    filename:'index.html'
})
module.exports={
//入口,要打包的文件
//要打包的文件不存在，会报错
//约定，默认的打包文件入口是src->index.js
 entry:path.join(__dirname,'./src/main.js'),
 output:{
	//输出文件的相关配置
	//默认打包文件出口是dist->main.js
  path:path.join(__dirname,'./dist'),//打包输出目录
  filename:'main.js'//输出文件的名称
  //输出目录必须存在，文件名称可以随便取
  
 },
 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:/\.vue$/,use:['vue-loader']},
         {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader'},
         {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},
         {test:/\.js|jsx$/,use:'babel-loader',exclude:/node_modules/}
     ]
 },
 //设置模式
  mode:'development',//development production
  //当属性值为production时，会自动压缩打包的文件
  plugins:[
    //插入插件对象
    htmlPlugin,
    new VueLoaderPlugin()
    ]
}

直接粘贴即可，下一步中的依赖和插件已经配置好了，需要其他的再添加。

4.安装依赖和插件

主要是webpack-dev-server和html-webpack-plugin，第三方文件处理配置(css,less,sass,.vue)，url-loader,babel
安装命令

# webpack
cnpm install webpack-cli -D
cnpm i webpack-dev-server -D
cnpm install html-webpack-plugin -D
cnpm i style-loader css-loader -D
cnpm i less-loader -D
cnpm i sass-loader -D
#内部依赖node-sass
cnpm i node-sass
#以上还需要安装相关的语言包，这里就没有安装了
cnpm i vue-loader vue-template-compiler -D
cnpm i url-loader file-loader -D
cnpm install  babel-loader -D
cnpm i '@babel/core' -D
cnpm i '@babel/plugin-proposal-class-properties' -D
cnpm i '@babel/plugin-transform-runtime' -D
cnpm i '@babel/preset-env' -D
cnpm i '@babel/runtime' -D

babel需要额外创建一个文件.babelrc.json

{
    "presets":["@babel/preset-env"],
    "plugins":["@babel/transform-runtime"]
}

5.创建基本项目结构

使用vue-cli创建就比较简单了

cnpm install vue-cli -g
vue init webpack 项目名称
然后会有一些提示，需要的y不需要的n即可
原来的webpack.config.js呢，变成了放在build下的webpack.base.conf.js
直接在这里面做配置的修改即可