webpack 面试

前端之家收集整理的这篇文章主要介绍了webpack 面试前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

资料:

Vue2.0手脚架搭建

step 1 确保你安装了node.js、Vue

(如果你嫌node.js自带的npm太慢,还要确保安装其他代替工具比如cnpm)

step 2 全局安装vue-cli npm install vue-cli -g

step 3 初始化项目 vue init webpack-simple my-project

(在想要的位置执行下方命令,会在该位置生成一个项目文件夹,文件夹名字是下方命令中你输入的my-project

小型项目:

vue init webpack-simple my-project

中大型项目:

vue init webpack my-project

step 4 进入已创建的项目文件夹:cd 项目文件,如: cd my-project

step 5 编辑package.jsonwebpack.config.js文件

@H_403_55@
  • package.json:可以编辑常用的项目依赖到里面,也可以不编辑,执行npm install之后,再单独执行npm install xxx安装额外的依赖。
  • webpack.config.js:后面说明。
  • step 5 执行npm install安装依赖

    step 6 执行npm run dev,即可启动

    step 7 另起一个命令窗口,cd到当前目录。编辑完代码后执行webpack → 页面更新。

    配置webpack.config.js文件

    1 入口文件

    配置entry
    (手脚架默认入口文件main.js在根目录下的src文件夹。根据需要改动。)

    module.exports = {
        entry: './src/main.js',……

    2 生产环境输出目录

    配置output

    module.exports = {
        ……
        output: {
            path: path.resolve(__dirname,'./dist'),\\【生产环境】build.js输出到生产环境的路径,例如当前是 ./dist/build.js 这个位置
            publicPath: '/dist/',\\ 【开发环境】开发环境使用npm run dev时的虚拟目录,因为开发环境下不依赖生产环境文件,所以目录不同,但是html引入是静态的,所以html里,写一个和生产环境一致的虚拟路径,html不用改。例如当前HTML就引入

    猜你在找的程序笔记相关文章