美文网首页
配置webpack

配置webpack

作者: _木_槿_ | 来源:发表于2018-10-11 14:40 被阅读0次

    配置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 babel-loader@7.1.5 -D

    然后  npx webpack

    8.新建index.html

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

                    <script src="dist/main.js"></script>

    9.启动webpack服务器

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

                        publicPath:"/public/"                  

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

                                // 好处:1,内存速度更快,提升编译速度

                                // 2,保护硬盘

                        将index.html内容修改为

                                <script type="text/javascript" src="./public/main.js"></script>

    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">

                       <h1>{{a}}</h1>

                    </div>

               在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值,无需刷新会自动打包

    相关文章

      网友评论

          本文标题:配置webpack

          本文链接:https://www.haomeiwen.com/subject/dmjbaftx.html