本地服务器整合配置文件,webpack配置

1.npm init初始化，生成package.json包

2.npm install .生成package-lock.json

3.再package.json里再test下面新写命令，"build" : "webpack", 同时webpack.config.js里，path:path.resolve(__dirname,'dist'),filename:'bundle.js',之后npm run build

4.很有可能全局和本地的版本不一致，所以配置build，可以在终端里下载webpack , npm install webpack@3.6.0 --save-dev

5.在package.json里发现devDependencies(开发时依赖)，dependencies(运行时依赖)

6.loader：(1)css文件转成js文件，main.js引入css文件，require('./css/normal.css')

(2)去webpack官网下载对应的loader，loaders里找样式，按照步骤npm安装，以及webpack.config.js里配置module

(3)css-loader只负责将css文件加载，style-loader负责加载css样式

(4)use里，从右至左执行

(5)配置图片时，在webpack.config.js里新创建个pubilcPath:"dist" ，这样打包后的图片会出现在dist文件夹里

7.loader：es6转成es5：终端npm install --save-dev babel-loader@7 babel-core babel-preset-es2015，在Webpack.config.js里 修改options: {

presets: ['es2015']

}

8.webpack配置vue：npm install vue --save，因为我们后续是在实际项目中也会使用vue的，所以并不是开发时依赖，

(1)在main.js里引入vue

import Vue from 'vue'

new Vue({

el:"#app",

data:{

message:"你好啊"

}

})，

(2)在webpack.config.js里配置

resolve:{

//alias:别名

alias:{

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

}

}

(3)npm install --save-dev vue-loader vue-template-compiler

9.Plugin：插件 const path = require('path')

const webpack = require('webpack')

module.exports = {

plugins:[

new webpack.BannerPlugin('最终版权归summer所有')

]

},

重新打包，查看bundel.js文件头部，会看到/*最终版权归summer所有*/

10.把index.html打包到dist文件夹里，

(1)下载插件：npm install html-webpack-plugin --save-dev

(2)修改webpack.config.js中plugins部分内容

1.导入模块     const htmlWebpackPlugin = require('html-Webpack-Plugin')

2.plugins:[

new webpack.BannerPlugin('在最终版权归summer所有'),

new htmlWebpackPlugin({

template:'index.html'

}),

]

11.js压缩 的Plugin：压缩js代码

(1)npm install uglifyjs-webpack-plugin@1.1.1 --save-devs

(2)修改webpack.config.js文件，使用插件：

const uglifyJsPlugin = require('uglifyjs-webpack-plugin')

plugins:[

new webpack.BannerPlugin('在最终版权归summer所有'),

new uglifyJsPlugin()

]

12.搭建本地服务器：这个本地服务器基于node.js搭建，内部由express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果

终端：npm install --save-dev webpack-dev-server@2.9.1

devserver也是作为webpack中的一个选项，选项本身可以设置如下属性：

contentBase:为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist

port:端口号

inline：页面实时刷新

historyApiFallback：在SPA页面中，依赖HTML5的hist模式

webpack.config.js文件配置:         devserver:{

contentBase:'./dist',

inline:true  },

再配置另一个scripts：--open参数表示直接打开浏览器     "dev":"webpack-dev-server --open"

13.配置文件合并：npm install merge