webpack使用的学习

一，安装node

二，安装webpack

npm install webpack

如果有提示 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue.ps1,因为在此系统禁止运行脚本

则需要执行：set-ExecutionPolicy RemoteSigned  

三，配置webpack的默认命令

1.在项目里面新建“webpack.config.js”

2.写入

const path = require('path')

module.exports={
    entry:'./src/main.js',
    output:{
        //path:'D:\\12.vue\\01-webpack的使用\\02-webpack的配置\\dist',
        path:path.resolve(__dirname, 'dist'),
        filename:'bundle.js'
    },
    mode: 'development' // 设置mode
}

3.执行:npm init命令创建package.json 文件。

4.执行:npm install加载依赖。

四，应用css打包

参照：https://www.webpackjs.com/loaders/

1.安装

npm install style-loader --save-dev

npm install --save-dev css-loader

在main.js中添加引用:import style from './file.css'

修改 webpack.config.js文件，加入配置。

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
}
完整的webpack.config.js配置如下：

const path = require('path')

module.exports = {
    entry: './src/main.js',
    output: {
        //path:'D:\\12.vue\\01-webpack的使用\\02-webpack的配置\\dist',
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    mode: 'development', //production,development 设置mode

    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader','css-loader']
            }
        ]
    }
}

 五，应用图片/文件打包

1.安装loader。

npm install --save-dev url-loader  

npm install --save-dev file-loader 

2.修改webpage.config.js

const path = require('path')

module.exports = {
    entry: './src/main.js',
    output: {
        //path:'D:\\12.vue\\01-webpack的使用\\02-webpack的配置\\dist',
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath:'dist/'//处理路径问题
    },
    mode: 'development', //production,development 设置mode

    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader','css-loader']
            },      
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                      //文件命名，去名字+8个hash字母

                        name:'img/[name].[hash:8].[ext]',

                      limit: 20000
                    }
                  }
                ]
            }
        ]
    }
}

 六.Vue的应用

1.安装vue。

npm install vue --save

2.修改配置解决“runtime-only”报错。

在webpage.config.js文件中追加一个节点。

    resolve:{

      alias:{

        'vue$':'vue/dist/vue.esm.js'

      }

    }

 完整的文件如下所示：

 

const path = require('path')

module.exports = {
    entry: './src/main.js',
    output: {
        //path:'D:\\12.vue\\01-webpack的使用\\02-webpack的配置\\dist',
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath:'dist/'
    },
    mode: 'development', //production,development 设置mode

    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader','css-loader']
            },      
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                      name:'img/[name].[hash:8].[ext]',
                      limit: 20000
                    }
                  }
                ]
            }
        ]
    },
    resolve:{
      alias:{
        'vue$':'vue/dist/vue.esm.js'
      }
    }
}