为了账号安全,请及时绑定邮箱和手机立即绑定
  • ####webpack使用步骤


     ###一,安装


    #1.npm init (进行初始化)

    #2,按照提醒直接回车,创建一个webpack.json文件

    #3,npm i vue webpack vue-loader

    #4,按照那个 'peer' 安装那个后面的模板


     ### 二,创建文件


      ##1,创建src目录,在其下创建文件app.vue 和 idnex.js

    #index.js文件如下

    // 入口文件:index.js

    import Vue from 'vue';

    import App from './app.vue';

    const root=document.createElement('div');

    document.body.appendChild(root)

    new Vue({

    // 声明一个方法

    render:(h)=>h(App)

    }).$mount(root)

      ##2,在根目录下新建webpack.config.js文件,并写入以下代码

    // 为了在浏览器中打开,建立webpack这个文件

    // 引入路径

    const path = require('path')

    module.exports = {

    // 文件的输入

    entry:path.join(__dirname,'src/index.js'),

    //文件的输出

    output:{

    filename:'bundle.js',

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

    },

    <!-- 由于报错:You may need an appropriate loader to handle this file type. 所以我们需要添加module属性 -->

    module:{

    rules:[

    {

    test:/.vue$/, //此为正则表达式,目的是为了识别.vue结尾的文件

    loader:'vue-loader'

    }

    ]

    }

    }


      ##3,在package.json的scripts添加 build: webpack --config webpack.config.js 即

    "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",


    "build": "webpack --config webpack.config.js"

    },

     ###三,命令行

    在终端中输入 npm run build之后,会在根目录下创建一个dist目录,此目录下面有一个bundle.js



    #### 总结

    webpack就是把不同的静态资源的类型打包成一个js,然后我们在html中引入这个js的时候,然后我们的html里面的js就可以正常运行 ,然后去执行我们的操作.

    因为我们在做前端项目的时候:

    我们希望把很多零碎的js打包成一起,因为这样可以减少http请求,同样,我们希望使用模块依赖,因为我们会做很多可复用的代码,把它写在一个模块里去,这样的话,我们在下一次有新项目的时候,可以再去使用原来的模块,而不需要再把原来的代码重写一遍

    除此之外,webpack还可以加载前端的所有文件,包括图片和css.


    查看全部
  • cross-env 为不同的平台设置统一的环境变量 

    查看全部
  • 当出现 WARN 时把提示的包对应安装好

    查看全部
  • onFocusChange 切换保存界面自动保存

    查看全部
  • npm i style-loader url-loader file-loader

    查看全部
  • 不识别css,似乎缺什么css loader

    查看全部
  • vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config

    查看全部
  • ERROR in ./src/app.vue 1:0

    Module parse failed: Unexpected token (1:0)

    You may need an appropriate loader to handle this file type.

    > <template>

    |     <div id="test">{{text}}</div>

    | </template>

     @ ./src/index.js 2:0-27 8:21-24


    查看全部
  • 使用当前项目里的webpack,而非全局的webpack


    > "build": "webpack --config webpack.config.js" 


    查看全部
  • vscode的插件:

    • eslint

    • EditorConfig for VS Code

    • gitignore

    • language-stylus

    • Nunjucks

    • One Dark Pro

    • Vetur

    • 。。。


    查看全部
  • vscode 中代开命令行  创建文件  npm init;

    npm i webpack vue vue-loader

    查看全部
  • vue设定:在vue-loader处理当中,当组件要显示的时候才加载样式,这样做的好处就是当异步加载组件的时候同时也把样式给加载过来,可以节省流量

    查看全部
  • jsx语法与.vue的单文件语法各有各的好处,.vue结构更清晰组件化更强,而jsx语法则可以使用js的原生方法,更加灵活一些

    查看全部
  • 前端什么?

    查看全部
    0 采集 收起 来源:课程介绍

    2018-11-18

  • postcss用来优化css的,通过一系列的组件来优化,如:autoprofixer,为css加前缀

    查看全部

举报

0/150
提交
取消
课程须知
1、对es6语法有基本了解 2、了解前端工程化 3、了解vuejs
老师告诉你能学到什么?
1、通过webpack搭建vue工程workflow 2、哪些是学习vue的重点 3、.vue文件开发模式 4、vue使用jsx进行开发的方式 5、vue组件间通信的基本方式 6、webpack打包优化的基本点

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!