vue入门2：webpack

运行

npm run dev

执行的是 dev-server.js

vue-cli的webpack配置分析

一,入门:

1,全局安装webpack;npm install -g webpack;

2,新建一个根文件夹存放项目,里面新建一个package.json文件,新建方法是:npm init,然后会有一系列选项,默认就好;

3,cd到新建的根文件夹,安装webpack,npm install webpack --save-dev,执行之后会出现一个node_modules文件夹

4,最简单的打包:通过配置文件来打包,在根文件夹下新建一个webpack.config.js的js配置文件,在里面指定唯一的入口文件和输出文件.在命令台通过webpack命令即可打包.

module.exports={

    entry:__dirname+"/app/main.js",//唯一的入口文件,除了事例的写法,还可以"./app/main.js".这个点不能少.

    output:{

        path:__dirname+"/public",//打包后的存放位置,可以引入path模块,然后path.resolve捏合路径path:path.resolve(__dirname,'public')

        filename:"bundle.js"//打包后输出的文件名

}

5,在4的基础上,通过在package.json的scripts属性添加属性,将npm的start命令指向webpack,这可以直接通过npm start启动打包功能,记住,键值都需要双引号.

"start":"webpack"

二:进阶

1,生成source map,使调试更容易,因为代码经过编译之后出现错误需要定位,所以需要source map,通过配置devtool属性的值来生成不同的sourcemap.devtool的值是通过eval cheap source-map module inline五个特性组合起来的.

eval： 使用eval包裹模块代码

source-map： 产生.map文件

cheap： 不包含列信息（关于列信息的解释下面会有详细介绍)也不包含loader的sourcemap

module： 包含loader的sourcemap（比如jsx to js ，babel的sourcemap）

inline： 将.map作为DataURI嵌入，不单独生成.map文件（这个配置项比较少见）

在webpack.config.js中加上:

devtool:'eval-source-map',//配置生成Source Maps，选择合适的选项

2,使用webpack构建本地服务器.实时监测并刷新代码,先安装webpack-dev-server.npm install webpack-dev-server --save-dev.

devserver作为webpack配置选项中的一项，具有以下配置选项

contentBase:  默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到“public"目录）

port:  设置默认监听端口，如果省略，默认为”8080“

inline:  设置为true，当源文件改变时会自动刷新页面

colors:  设置为true，使终端输出的文件为彩色的

historyApiFallback:  在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html

3,loader使用:

1,cnpm install --save-dev loader名称   

2,loader的作用是将其他的资源文件转换成js文件.比如css  png图片 ts代码等等.

3,loader是在配置文件的module下面的rules选项,rules是个数组,每一条信息对应一个loader(在webpack早期版本中rules用的是loaders),test是一个正则表达式的匹配对象,不需要引号,use表示使用哪个loader,如果有多个loader,放在数组中.(在webpack早期版本中use用的是loader)

loader举例