利用webpack手动构建vue工程

一 创建一个文件夹，在文件夹中打开命令行执行：$npm install 创建一个package文件 ，可以先忽略作者等信息；

二 安装webpack依赖包（根据需要安装）

    //全局安装

    1 npm install -g webpack

   //安装到你的项目目录

    2 npm install --save-dev webpack（以此为例，需要翻墙）

    3 npm install --save vue 默认安装最新版vue

    4 npm install --save-dev webpack-dev-server 安装webpack，webpack-dev-server（是一个小型的Node.js Express服务器）

            5 npm install --save-dev babel-core babel-loader babel-preset- es2015  安装babel，babel的作用是将es6的语法编译成浏览器认识的语法es5

      　  6 npm install --save-dev vue-loader vue-template-compiler 用来解析vue的组件，.vue后缀的文件

    　　7 npm install --save-dev css-loader style-loader 用来解析css

    　　8 npm install --save-dev url-loader file-loader 用于打包文件和图片

   　　 9 npm install --save-dev vue-router 安装路由

 三 创建文件和文件夹

注意public内部除了index.html是自己创建 的，其他的都是webpack自动build的

四  编写各个文件，一定注意webpack.config.js和入口文件的main.js的编写

五 命令行分别输入 webpack 和webpack-dev-server

webpack.config.js

var path = require('path')
var webpack = require('webpack')

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './public'),
        filename: 'build.js'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[hash]'
                }
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            }
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    performance: {
        hints: false
    },
    devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map'
    // http://vue-loader.vuejs.org/en/workflow/production.html
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: true,
            compress: {
                warnings: false
            }
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: true
        })
    ])
}

 index.html body内部

 

router.js

 

 main.js

 效果如图

具有二级路由功能

 

注意：1 npm install 在安装 npm 包时，有两种命令参数可以把它们的信息写入 package.json 文件，一个是npm install --save另一个是 npm install --save-dev，他们表面上的区别是--save 会把依赖包名称添加到 package.json 文件 dependencies 键下，--save-dev 则添加到 package.json 文件 devDependencies 键下，--save-dev 是你开发时候依赖的东西，--save 是你发布之后还依赖的东西。

           2 css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(…)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。

            3 本人菜鸟一个，很多低级错误，若使用sublime编写时注意统一各个文件的编码方式。使用Ctrl+Shift+P打开命令行模式，在里面输入Install Package即可搜索需要的Package。一般使用“ConvertToUTF8”和“GBK Encoding Support”即可正常读取和写入CJK格式的文件了。

   4 当我在webpack.config.js文件中加入devServer的配置,当webpack-dev-server时总是报错，还未找出具体原因？？ 
当我将package.json改变并引入cross-env包之后通过运行npm run dev 可以正常运行 ，而 npm run build 则会产生error
npm install cross-env --save-dev

详见 https://segmentfault.com/a/1190000008602934
有关webpack配置的一些问题详见 https://doc.webpack-china.org/configuration/

转载于:https://www.cnblogs.com/xhliang/p/7526911.html