webpack+vue-cli

最近一直在琢磨这个怎么用。。在学习了vue后，没想到还有vue全家桶：）。尝试了自己安装vue-cli和webpack的demo。

我的理解是：

（1）使用原因：对于大型的项目开发，使用vue-cli是会比较便捷的（我也不知道为什么，反正也没大型的经验，但是大家都这样说。。。）

（2）与vue-cli打包一起用的webpack是在写完了代码后把写的一堆乱七八糟各种格式的前端代码整合成单页面html的形式，最后就只剩了js,css，html等等正常的文件。总之对于大型项目会用到各种各样格式的文件来说，最后的整合是很有必要的。

 

 

1、vue-cli的使用，我掌握了最好用的那种：vue ui。在安装了vue,vue-cli后，直接使用vue-cli命令就可以进入vue的界面形式，在界面里创建项目。项目创建完成后，查看package.json文件，可以看到script里的有的几个初始命令。如下：

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

在cmd命令行中，使用命令：npm run serve

就可以先跑起来刚创建的vue初始demo。默认在localhost:8080端口，在浏览器里打开就可以了。（直接用webstorm的打开代码对应浏览器功能是行不通的，页面展示是空白的）。

2、打包的画要在创建项目的文件夹下，使用npm命令安装webpack。这个涉及到自己配package.json文档里的script代码了。例如项目里：

"scripts": {
    "start": "cross-env NODE_ENV=development webpack-dev-server --hot --inline",
    "start3": "cross-env NODE_ENV=development webpack-dev-server --hot --inline --config webpack.order.js",
    "dev": "cross-env NODE_ENV=development2 webpack --open --display-error-detail --colors  --progress --hide-modules --watch --config webpack.config.js",
    "build": "cross-env NODE_ENV=production webpack --display-error-detail --colors  --progress --hide-modules --watch --config webpack.config.js",
    "dev2": "cross-env NODE_ENV=development2 webpack --display-error-detail --colors  --progress --hide-modules --watch --config webpack.resource.js",
    "build2": "cross-env NODE_ENV=production webpack --display-error-detail --colors  --progress --hide-modules --watch --config webpack.resource.js",
    "dev3": "cross-env NODE_ENV=development2 webpack --display-error-detail --colors  --progress --hide-modules --watch --config webpack.order.js",
    "build3": "cross-env NODE_ENV=production webpack --display-error-detail --colors  --progress --hide-modules --watch --config webpack.order.js"
  },

webpack --open的意思是在打包后直接自动打开默认的浏览器

在webpage.config.js里设置了一些打包的规则：例如loader里设置各种格式的文件，用什么loader读取，打包处理。

//webpack配置
module.exports = {
    entry: entryData,
    output: {
        path: path.join(__dirname, '/dist/'), // 打包后的路径位置
        filename: filename, // 生产的js文件路径及名字
        chunkFilename: filename, // 设置图片、require.ensure 文件路径及名字
        publicPath: publicPath, // 设置图片处理、require.ensure、css的引用路径
    },
    module: {
        devtool: '#source-map',
        loaders: [
            //解析json文件
            {
                test: /\.json$/,
                loader: "json-loader"
            },

            //针对vue文件分离处理
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                exclude: /node_modules/,
            },

            //图片小于大约50k则会自动压缩base64编码的图片，否则转入到dist下得image文件夹中（50000）
            {　　　
                test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
                loader: 'url-loader?limit=50000&name=image/[hash:8].[name].[ext]',
            },

            //编译es6为es5
            {
                test: /\.js?$/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                },
                exclude: /node_modules/
            },

            //打包字体
            {
                test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
                loader: 'file-loader?name=fonts/[name].[ext]'
            },

            //打包css   
            //postcss-loader 用来对.css 文件进行处理，并添加在 style-loader 和 css-loader 之后,通过一个额外的 postcss 方法来返回所需要使用的 PostCSS 插件
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader')
            },

            //打包scss
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader!sass-loader') //这里用了样式分离出来的插件，如果不想分离出来，可以直接这样写 loader:'style!css!sass'
            }

        ]
    },