初识webapck，使用webpack创建项目

提示：使用webpack前，请先安装nodejs，并了解基本的npm命令，node建议使用最新的版本，webpack建议局部安装

1：windows打开终端命令窗口，mkdir webpack_test

1.1 cd webpack_test

1.2npm init //初始化项目

1.3npm install webpack --save-dev

提示：在安装一个要打包到生产环境的安装包时，你应该yeshi使用 npm install --save，如果你在安装一个用于开发环境的安装包（例如，linter, 测试库等），你应该使用 npm install --save-dev。

1.4 npm install webpack-cli --save-dev //webpack 4+版本要求安装cli

提示：我们还需要调整 package.json 文件，以便确保我们安装包是私有的(private)，并且移除 main 入口。这可以防止意外发布你的代码。 添加："private": true, 删除："main": "index.js",

1.5 创建配置文件

根目录下创建webpack.config.js,入口文件index.js需要你自己创建

constpath=require('path');module.exports={

    entry:'./src/index.js',

    output:{

        filename:'bundle.js',

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

    }

};

最后执行 npx webpack --config webpack.config.js,会在根目录下生成dist文件夹，里面有个bundle.js文件，也就是输出文件

1.6 到package.json文件，在script里面添加 “build”:"webpack",npm run build 命令，来替代我们之前使用的 npx 命令

此时每次更改代码都需要，npm run build  ,在package.json的script里添加 “watch”:"webpack --watch",执行npm run watch 就会监听你代码的改变,ctrl+c退出监听

此时一个包含入口出口文件的项目就算是构建成了，目录结构如下，dist文件夹下的html文件是自己创建，src以及index.js也是自己创建，webpack.config.js是配置文件，更多配置文件的介绍请看config详情

webpack_test

|- package.json

|- webpack.config.js

|- /dist

      |- bundle.js

      |- index.html

|- /src

      |- index.js

|- /node_modules

webpack起步介绍请看  webpack开发指南

加载vue文件，依赖vue-loader, vue-loader依赖vue-template-compiler，而 vue-loader v15+版本需要在webpack.config.js添加

const VueLoaderPlugin = require('vue-loader/lib/plugin');

,plugins: [ //配置插件的节点

        //new一个VueLoaderPlugin

        new VueLoaderPlugin()

    ],