# webpack-vue

**Repository Path**: FelixBinCloud/webpack-vue

## Basic Information

- **Project Name**: webpack-vue
- **Description**: 使用webpack搭建vue开发环境
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-02-19
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

##注：主要是用来记录相关构建步骤
##参考https://www.javascriptcn.com/read-40976.html
###1、 `node.js`安装+`webstorm工具`

###2、初始化项目  
```
npm init -y
```

###3、`webpack`安装  
####全局安装:
```$xslt
npm i -g webpack
```
####局部安装:
```$xslt
npm i -D webpack
```
###4、根目录新建webpack.config.js文件 
###5、安装热更新及本地服务 
-安装
```$xslt
npm i -D webpack-dev-server
```
-配置
  --webpack.config.js中配置 
  ```$xslt
  devServer: {
         //设置基本目录结构
               contentBase:path.resolve(__dirname,'dist'), //本地服务器所加载的页面所在的目录
               //服务器的IP地址，可以使用IP也可以使用localhost
               host:'localhost',
               //服务端压缩是否开启
               compress:true,
               //配置服务端口号
               port:8888
    }
```
   --package.json中命令配置
  ```$xslt
  "scripts": {
    "dev": "webpack-dev-server"
  },
```
###6、根目录下新建index.html
###7、新建入口文件
  -在src目录下新建入口文件main.js

###8、webpack.config.js中配置resolve  
   ```$xslt
    resolve: {
          alias: {
              'vue$': 'vue/dist/vue.esm.js' //内部为正则表达式  vue结尾的
          }
      },
```
###9、安装vue+引入
-安装
```$xslt
npm i vue --save
```
-在src/main.js中引入vue
  ```$xslt
   import Vue from 'vue'
```

##10、配置es6->es5   babel插件
-安装
```$xslt
npm  install --save-dev babel-core babel-loader babel-preset-es2015
```
-根目录新建`.babelrc`
```$xslt
{
    "presets":["es2015"]
}
```
-webpack.config.js文件里loader配置
```$xslt
{
    test:/\.(js)$/,
    use:{
        loader:'babel-loader',
    },
    exclude:/node_modules/
}
```

##11、配置各种loader
webpack默认只支持js的模块化，如果需要把其他文件也当成模块引入，就需要相对应的loader解析器
###1、样式部分
 (1)scss
  -(1)安装scss和相应样式文件解析器
 ```$xslt
 npm install sass-loader node-sass webpack --save-dev
```
  -webpack.config.js中配置
  ```$xslt
module: {
    rules: [
    {
       test: /\.scss$/,
       use: [
            "style-loader", // 将 JS 字符串生成为 style 节点
             "css-loader", // 将 CSS 转化成 CommonJS 模块
            "sass-loader" // 将 Sass 编译成 CSS，默认使用 Node Sass
                ]
            }]
  },
```
(2)less
-安装less及相应样式解析器

```$xslt
npm install less-loader --save-dev
```
-webpack.config.js中配置
```$xslt
 {
        test: /\.less$/,
        loader: 'less-loader', // compiles Less to CSS
      }
```
(3)css
-安装css及相应样式解析器
```$xslt
npm install --save-dev css-loader

npm install style-loader --save-dev
```
-webpack.config.js中配置
```$xslt
 {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },

```

###2、图片部分
（1）css中图片
需要`file-loader`、`url-loader`
`file-loader`: 解决引用路径
`url-loader`:url-loader会将引入的图片编码，生成dataURl(一串字符)

-安装`file-loader`和`url-loader`
```$xslt
npm install --save-dev file-loader url-loader
```
-配置url-loader
```$xslt
            {
               test:/\.(png|jpg|gif)/ ,
               use:[{
                   loader:'url-loader',
                   options:{
                       limit:500
                   }
            }
```

##12 使用Vue单文件组件
-安装vue-loader及依赖
```$xslt
npm i vue-loader vue-template-compiler –save-dev
```
-配置webpack.config.js
```$xslt
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      // ... 其它规则
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // 请确保引入这个插件！
    new VueLoaderPlugin()
  ]
}
```
-配置webpack解析（resolve）
```$xslt

resolve: {
  //路径别名
  alias: {
    'vue/div>: 'vue/dist/vue.esm.js',
    '@':path.resolve(__dirname, './src'),//引入组件是用@代替--/src
  },
  //路径别名自动解析确定的扩展
  tensions: ['.js', '.vue', '.json']
},
```