视频电商网站实战 - 实战准备

1.初始化

npm init 
#cd到项目根目录执行该命令，一路回车
#初始化并生成package.json

我们可以看一眼此时package.json的内容：

{
  "name": "videopro",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

2.前端部分(安装必备)

npm install babel-cli babel-loader babel-preset-es2015 css-loader file-loader html-webpack-plugin raw-loader style-loader url-loader vue vue-loader vuex webpack element-ui webpack-dev-server --save-dev
#其他以后再加

执行完这个命令后，项目根目录多了一个node_modules文件夹，并且里面N多模块，都是我们刚安装的。
package.json文件内容也有变化，我们可以看一下：

{
  "name": "videopro",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.18.0",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.18.0",
    "css-loader": "^0.26.1",
    "element-ui": "^1.1.3",
    "file-loader": "^0.9.0",
    "html-webpack-plugin": "^2.26.0",
    "raw-loader": "^0.5.1",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "vue": "^2.1.8",
    "vue-loader": "^10.0.2",
    "vuex": "^2.1.1",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  }
}

3.创建babel配置文件，文件名是固定的.babelrc，内容如下：

{
    "presets":["es2015"]
}

这就是告诉babel帮我们转译es2015的js语法。

4.来到项目中，规划一下目录结构，如图

5.创建webpack配置文件webpack.config.js，内容如下：

//需要这个webpack打包html的插件,引入进来
var  HtmlWebpackPlugin = require('html-webpack-plugin');
//当然必须把webpack引入进来
var webpack = require('webpack');

module.exports = {
    //入口文件配置
    entry:{
        //我们这里有2个入口文件
        //一个是网站必须的入口文件,一个是会员中心的入口文件
        'member-index':[__dirname+'/src/jtthink/member-index.js','webpack-dev-server/client?http://127.0.0.1:8080'],
        'web-index':[__dirname+'/src/jtthink/web-index.js']
    },
    //输出配置
    output:{
        publicPath:'http://127.0.0.1:8080/',
        path:__dirname+'/src/webapp/js',  //输出路径
        filename:'[name].js' //最终打包生成的文件名
    },
    //解析配置
    resolve:{
        alias:{vue:'vue/dist/vue.js'}   //指定使用那个路径下的vue,避免冲突
    },
    //module配置
    module:{
        loaders:[
            //.js文件用babel编译,不包括node_modules目录中的
            {test:/\.js$/,loader:'babel',query:{compact:true},exclude:/node_modules/},
            //2个loader,先用vue然后再用babel
            {test:/\.vue$/,loader:'babel!vue',exclude:/node_modules/},
            //字体文件用file-loader
            {test:/\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,loader:'file'},
            //.css文件用相关的loader
            {test:/\.css$/,loader:'style-loader!css-loader'},
            {test:/\.(png|jpe?g|gif|svg)(\?\S*)?$/,loader:'file-loader',query:{name:'[name].[ext]?[hash]'}}
        ]
    },
    //配置webpack插件
    plugins:[
        new HtmlWebpackPlugin({
            filename:'/member/index.html', //会员中心首页
            template:__dirname+'/src/pages/member/index.html', //模板文件
            inject:'body',
            hash:true,
            chunks:['member-index']
        }),
        new HtmlWebpackPlugin({
            filename:'index.html', //全站首页
            template:__dirname+'/src/pages/web/index.html', //模板文件
            inject:'body',
            hash:true,
            chunks:['web-index']
        }),
    ]
}

6.修改package.json文件

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --inline --hot --content-base ./src/webapp", 
    "b": "webpack" 
  },

新增了2个script，可以这样使用：npm run dev或npm run b。这样其背后就执行了webpack的打包命令。

7.测试
执行npm run dev，
然浏览器打开http://127.0.0.1:8080/

为什么弹出这个，是因为我们在src/jtthink/web-index.js 中写了：

alert('这是web-index');

http://127.0.0.1:8080/ 打开网址首页
http://127.0.0.1:8080/member/index.html 打开会员中心首页

最后再看一眼我们的项目目录结构：