webpack/webpack-dev-server遇到的问题

1.使用npm命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm init -y 初始项目
npm install 下载依赖
npm i jquery -S 安装jquery到生产环境中
npm i jquety -D 安装到开发环境中
npm install vue --save-dev

2.webpack.config.js配置文件
const path = require('path');
//获取一个地址接口
module.exports = {
mode: "development",
entry: path.join(__dirname, 'src/index.js'), //获取当前DOS窗口的路径 __dirname
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
},
};
编译JS文件使得浏览器认识NODE.JS代码，才可以在浏览器上运行
静态资源太多

3.webpack-dev-server版本号对应关系：

 

 （转载）

4.npm run webpack-dev-server --open(直接浏览器打开) --port 3000 --contentBase src(本目录路径) --hot(替换局部修改代码，浏览器无刷新)

 

5.cnpm i html-webpack-plugin -D 下载plugin插件

 1.在内存根据页面生成一个新的页面

 2.把打包好的bundle.js自动追加到页面中 如图：

 

6 package.json文件:

const path = require('path');

 const webpack = require('webpack');

 const htmlWebpackPlugin = require('html-webpack-plugin');

 //获取一个地址接口

 module.exports = {

     mode: "development",

     //入口：表示webpack打包哪个文件

     entry: path.join(__dirname, './src/index.js'), //获取当前DOS窗口的路径 __dirname

     //出口 指定输出到哪个目录去

     output: {

         path: path.join(__dirname, './dist'),

         filename: 'bundle.js',

     },

     //配置dev-server的第二种方式

     devServer: {

         //"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"

         open: true,

         port: 3000,

         contentBase: 'src',

         hot: true //启用热更新

     },

     plugins: [

         new webpack.HotModuleReplacementPlugin(), //在插件中启用热更新 new 一个热更新的模块对象

         new htmlWebpackPlugin({

             template: path.join(__dirname, './src/index.html'),

             filename: 'index.html'

         })

     ]

 };

 7. webpack只能装载js文件 而css文件需要用loader导入

下载装载器 css-loader,style-loader

cnpm i css-loader,style-loader -D

8. 配置第三方模块

 module: { //所有第三方模块

         rules: [

             { test: /\.css$/, use: ['style-loader', 'css-loader'] }

         ]

     }

 这里将CSS-LOADER和STYLE_loader 倒换位置后会出现下面的BUG问题，因为在规则中是有严格的执行顺序，从右到左，先加载CSS样式器，然后加载STYLE样式加载器

 

 9. 配置babel 是识别导入的js文件

babel 版本对应关系：

 

 这里7.版本后不再使用babel-preset-stage

babelrc配置文件

 webpack添加规则：

 

 添加JS规则，排除node_modules

10 . WDS不能连接，跨域问题，这里修改端口号就可以解决

 vue页面中报错 [WDS] Disconnected!
原因：
因为用了全局代理软件，所以需要将 config/index.js中
{host:localhost}改为
{host: 127.0.0.1}刷新页面即可

 11.解决编译问题

  resolve: {

         alias: {

             'vue$': 'vue/dist/vue.esm.js'

         }

     }