webpack在vue项目实战的基本操作

webpack官网地址

https://doc.webpack-china.org/

也可参考（项目建设）

http://blog.youkuaiyun.com/u010020858/article/details/72865101

首先要有node环境以及下载cnpm。

然后开始下载webpack。

1、cnpm init （ 然后name：你取得名字，然后一路回车。）

或是使用淘宝镜像

npm install -g cnpm --registry='https://registry.npm.taobao.org'

# 全局安装 vue-cli

$ cnpm install --global vue-cli

# 创建一个基于 webpack 模板的新项目

$ vue init webpack-simple my-project

# 安装依赖，走你

$ cd my-project

$ cnpm install

$ cnpm run dev

$ npm run build（项目建成打包）

就可以启动项目了。

webpack的基本操作

1、cnpm init （ 然后name：你取得名字，然后一路回车。 ）

或是使用淘宝镜像

npm install -g cnpm --registry='https://registry.npm.taobao.org'

2、cnpm install -- sava-dev webpack@2.6.0

下载好webpack就可以创建项目了（创建项目）

3、wepack entry.js bundle.js （打包语句）

//自己创建一个entry.js文件通过webpack打包成一个模块化的bundle.js文件

当entry.js引用其他文件时通过wepack entry.js bundle.js 语句也可以载入模块bundle中。

但是引用css文件时需要下载ruby和下载css插件。

3.1首先在webpack.config.js插件配置中加入这两个配置。

module: {

rules: [

{

test: /\.css$/,

loader: 'style-loader',

},

{

test: /\.css$/,

loader: 'css-loader',

},

]

}

3.2然后执行语句：

cnpm install --sava-dev css -loader style-loader

注释：css -loader 是来识别css文件的，

style-loader作用是文件内部生产一个style标签，能够让打包样式在浏览器上识别。

然后在执行wepack entry.js bundle.js 这句话。