vue-wabpack环境配置

  -vuecomponents
        -src
            -components
              -Header.vue
              -Main.vue
              -Item.vue
              -Footer.vue

            -public
                -main.html
                -css
                   -css.css
                -imgs
                    -1.png

            -App.vue
            -main.js   

        -.gitignore
        -package.json
        -README.md
        -webpack.config.js   




搭建项目环境webpack
1.npm init 初始化，手动创建package.json/或者npn init

2.安装webpack, npm i webpack webpack-cli -D

3.书写webpack的配置文件（参考官方文档）webpack.config.js
      //node内置核心模块，用来设置路径。
      const { resolve } = require('path');
      //只能使用 CommonJS 规范暴露
      module.exports = {
        // 入口文件配置
        entry: './src/js/app.js',               
        // 输出配置
        output: {         
          // 输出文件名
          filename: './js/built.js',    
          //输出文件路径配置
          path: resolve(__dirname, 'build')  
          // 添加 devServer 服务后需要调整输出的路径
            publicPath: '/'  
        },
        // development 与 production 开发环境(二选一)
        mode: 'development'  
        
        module:{
              rules:[]
        }

      plugins: [
            
          ]
                    
      };



4. webpack可以直接运行    npm需要配置package.json文件中scripts启动选项 npm run 去启动
"server": "webpack", 直接在本地打包生成dist文件夹

5.运行之后html和打包生成的js不会自动引用      配置插件html-webpack-plugin打包连带html文件
安装； npm  i html-webpack-plugin -D
    webpack配置文件
    1.const HtmlWebpackPlugin = require('html-webpack-plugin');
    2.new HtmlWebpackPlugin({
        template: './src/public/index.html', // 设置要编译的 HTML 源文件路径
        }),
    3.此时npm run server， 打包文件夹dist中。index.html自动会引入main.js  

6.清除打包文件目录，每次打包生成了文件，都需要手动删除，引入插件 `clean-webpack-plugin` 帮助我们自动删除上一次生成的文件
安装；npm install clean-webpack-plugin --save-dev
    webpack配置文件；

    1. 引入插件 const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 
    2. 配置插件  new CleanWebpackPlugin() 

7.借助 Babel 可以将浏览器不能识别的新语法（ES6, ES7）转换成原来识别的旧语法（ES5），浏览器兼容性处理
安装loader；npm install babel-loader @babel/core @babel/preset-env --save-dev
配置loader;  
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader",
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }


8.main.js中引入css文件； import  './public/css/index.css'

9.打包 css 资源，css 文件 webpack 不能解析，需要借助 loader 编译解析
安装 loader;   npm install css-loader style-loader  --save-dev 
      webpack配置文件；
      1.//解析css
            {
              test: /\.css$/,
              use: [ 'style-loader', 'css-loader'] //前后顺序不能颠倒
            },


10. 打包样式文件中的图片资源,图片文件 webpack 不能解析，需要借助 url-loader编译解析
安装 loader； npm install file-loader url-loader --save-dev 
      webpack配置文件；
      1.解析图片 媒体文件
            {
              test: /\.(png|jpg|gif)$/,
              use: [
                {
                  loader: 'url-loader',
                  options: {
                    limit: 8192
                  }
                }
              ]
            },

11.自动编译并运行，每次修改代码都需要重新执行 webpack 命令，可以使用 webpack-dev-server 自动打包运行
安装 loader； npm install webpack-dev-server --save-dev
      webpack配置文件；
      1. 添加 devServer 服务后需要调整输出的路径
              publicPath: '/'
      2. 增加 devServer 配置
          devServer: {
              open: true,     // 自动打开浏览器
              compress: true, // 启动gzip压缩
              port: 3000,     // 端口号
              quiet:true
          },    

      3. npm需要配置package.json文件中scripts启动选项 npm run 去启动
      "dev": "webpack-dev-server "  直接将打包文件在内存中存储

12.配置devtool 定位错误位置为原始代码的哪一行
      webpack配置文件；  loader中配置
      devtool:  'cheap-module-eval-source-map', //设置 devtool 策略    

13.安装vue ; npm i vue -S
main.js 引入vue  ； import Vue from 'vue'

14.vue-loader， 解析vue文件
安装 npm install -D vue-loader vue-template-compiler
webpack配置文件；
1. 引入插件 const VueLoaderPlugin = require('vue-loader/lib/plugin')
2. //配置vue相关loader
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
3.配置插件在plugins中，new VueLoaderPlugin()  
4. 在css中修改配置//解析css
            {
              test: /\.css$/,
              use: [ 'style-loader', 'css-loader'] //前后顺序不能颠倒
            },  

修改项；use: [ 'vue-style-loader', 'css-loader']  

15. 在main.js引入组件APP入口文件，import App from './App.vue'
render: h => h(App)  // 注册我们的App组件，并且会把App组件进行渲染，并且runtime-only版本Vue可以使用

16.webpack配置扩展名和别名
webpack配置文件；
resolve:{
    extensions: [".js", ".json", ".vue"], //自动解析包含的扩展名文件，以后导入不用带扩展名
    alias: {
      //配置别名的地方
      '@': path.resolve(__dirname, 'src'), //这个别名代表以后@就是src的绝对路径
    }
  }

在index.html文件中,引入css,然后运行npm run dev,样式未生效，需要添加这个css插件
webpack配置拷贝public下的css文件到list文件的css "npm install copy-webpack-plugin@5.1.1",
在webpack配置文件中引入，const CopyWebpackPlugin = require('copy-webpack-plugin');
配置插件
new CopyWebpackPlugin([{
from:'./src/public', //从原文件找到css的路径
to:path.resolve(__dirname, 'dist'),//配置的打包后的绝对路径
ignore:['index.html'] //忽略原文件public中的html文件
}])//为了把css拷贝到dist下

17. git操作
      1.git init 仓库初始化
      2.配置忽略文件， .gitignore
      3.本地配置远程仓库的地址， git remote add origin https://github.com/xiaohigh/test2.git 
      4.本地提交 git add -A     git commit -m 'message'
      5.推送到远程 git push origin master
      6.拉取远端代码 git pull