配置webpack

配置webpack

1 新建一个文件夹，cmd进入该文件夹

2 初始化 

npm init -y

npm install webpack webpack-cli webpack-dev-server --save-dev

    想要支持ES6，需要安装babel依赖

    babel：js编译平台

    作用：让浏览器支持下一代JS(ES6，ES7.....)代码，支持使用基于js的进行语言拓展，如：Ract的JSX

3. 安装babel

npm install --save-dev babel-loader babel-core babel-preset-es2015

        解析：

            babel-core：babel核心包

            babel-loader：babel加载包

            babel-preset-es2015：解析ES6的包

4. 创建webpack.config.js文件如下

5.新建dist文件夹

            // 引入node的path模块

 const path = require('path');

            // 指定返回接口的集合

            module.exports = {

                    mode:"production",

                    // production:生产模式

                    // development：开发模式

                    // none：无模式

                    // 打包的入口文件

                    entry:"./js/index.js",

                    // 打包的输出文件地址和文件名

                    output:{

                            path:path.resolve(__dirname,"dist"),

                            filename:"main.js"

                    },

                    // 模块设置

                    module:{

                        // 模块规则

                        rules:[

                            {

                                test:/\.js?$/,

                                exclude:[

                                    path.resolve(__dirname,"node_modules")

                                ],

                                loader:"babel-loader",

                                options:{

                                    presets:["es2015"]

                                }

                            }

                        ]

                    }

                }

6.创建js文件夹

        在js文件夹中创建index.js内容为         

                console.log("我是入口js文件");

7. 执行 npx webpack

    报错：

                ERROR in ./js/index.js

                Module build failed (from ./node_modules/babel-loader/lib/index.js):

                Error: Cannot find module '@babel/core'

                babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.

                at Function.Module._resolveFilename (module.js:547:15)

                at Function.Module._load (module.js:474:25)

                at Module.require (module.js:596:17)

执行：npm i [email protected] -D

然后  npx webpack

8.新建index.html

              引入打包成功的main.js文件

                

9.启动webpack服务器

                    在webpack.config.js中的输出对象output中添加属性

                    publicPath："/public/"                  

                            // webpack-dev-serber提供的虚拟文件夹(在内存和硬盘都找不到)

                            // 好处：1，内存速度更快，提升编译速度

                            // 2，保护硬盘

                    将index.html内容修改为

                            

10.执行：node_modules\.bin\webpack-dev-server

                执行成功说明webpack提供的本地服务器启动成功，此时可以在浏览器中访问http://localhost:8080

                        这种方法文件路径不好操作

                        修改：package.json

                        将“main”：“index.js”修改成：“webpack.config.js”，

                        在"test": "echo \"Error: no test specified\" && exit 1",下面加

                        "start:dev": "webpack-dev-server"

                        CMD执行：

                            ctrl + c：退出服务器

                        再执行：

                         npm run start:dev

安装vue

 下载vue指令  

npm install --save vue

    import  Vue  from  "vue";

                       修改

                new Vue({

                  el: "#app",

                  data: {

                    a: 1

                }

    修改index.js

    添加：divid="app">

                  

{{a}}

               

           在webpack.config.js中加入resolve属性

    resolve: {

             alias: {

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

                // 用 webpack 1 时需用 'vue/dist/vue.common.js'

                }

              }

然后执行npx webpack

npm run start:dev

    修改index.js的msg值，无需刷新会自动打包