webpack使用(三)

来源：互联网发布：matlab 2015b mac下载编辑：程序博客网时间：2024/05/16 07:45

这章了解下webpack和成熟框架vue 的集成.

一个很简单的vue,不含webpack

代码为c1 ,直接一个html文件，引入 vue.js 即可。不依赖其它

<html><head>  <meta charset="utf-8"></head><body><div id="app-5">  <p>{{ message }}</p>  <button v-on:click="reverseMessage">Reverse Message</button></div></body>    <script src="./vue.js"></script>    <script type="text/javascript">        var app5 = new Vue({          el: '#app-5',          data: {            message: 'Hello Vue.js!'          },          methods: {            reverseMessage: function () {              this.message = this.message.split('').reverse().join('')            }          }        })    </script></html>

和webpack集成

vue-loader官网的例子直接是使用 vue-cli ，照着例子来生成一下

npm install -g vue-clivue init webpack-simple hellocd hellonpm installnpm run dev

│  index.html│  package.json│  README.md│  webpack.config.j s│├─node_modules│  └─core-js│      └─client└─src    │  App.vue    │  main.js    │    └─assets            logo.png

看看package.json

{  "name": "c2",  "description": "A Vue.js project",  "version": "1.0.0",  "author": "",  "private": true,  "scripts": {    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"  },  "dependencies": {    "vue": "^2.2.1"  },  "devDependencies": {    "babel-core": "^6.0.0",    "babel-loader": "^6.0.0",    "babel-preset-latest": "^6.0.0",    "cross-env": "^3.0.0",    "css-loader": "^0.25.0",    "file-loader": "^0.9.0",    "vue-loader": "^11.1.4",    "vue-template-compiler": "^2.2.1",    "webpack": "^2.2.0",    "webpack-dev-server": "^2.2.0"  }}

例子是用webpack2来搞,

webpack.config.js的配置

var path = require('path')var webpack = require('webpack')module.exports = {  entry: './src/main.js',  output: {    path: path.resolve(__dirname, './dist'),    publicPath: '/dist/',    filename: 'build.js'  },  module: {    rules: [      {        test: /\.vue$/,        loader: 'vue-loader',        options: {          loaders: {          }          // other vue-loader options go here        }      },      {        test: /\.js$/,        loader: 'babel-loader',        exclude: /node_modules/      },      {        test: /\.(png|jpg|gif|svg)$/,        loader: 'file-loader',        options: {          name: '[name].[ext]?[hash]'        }      }    ]  },  resolve: {    alias: {      'vue$': 'vue/dist/vue.esm.js'    }  },  devServer: {    historyApiFallback: true,    noInfo: true  },  performance: {    hints: false  },  devtool: '#eval-source-map'}if (process.env.NODE_ENV === 'production') {  module.exports.devtool = '#source-map'  // http://vue-loader.vuejs.org/en/workflow/production.html  module.exports.plugins = (module.exports.plugins || []).concat([    new webpack.DefinePlugin({      'process.env': {        NODE_ENV: '"production"'      }    }),    new webpack.optimize.UglifyJsPlugin({      sourceMap: true,      compress: {        warnings: false      }    }),    new webpack.LoaderOptionsPlugin({      minimize: true    })  ])}

嗯，加了一些loader 和 plugin,上面的不少东西都需要花时间去了解，不过我们平时使用的时候，直接用就行了,

扩展：在vue模板加less的支持

既然直接使用模板，那我们也要能扩展这些,如加个less
三个步骤
* 安装相关loader

npm install --save style-loader css-loader less-loader less

webpack.config.js增加loader配置

{      test: /\.less$/,      use: [{        loader: "style-loader" // creates style nodes from JS strings      }, {        loader: "css-loader" // translates CSS into CommonJS      }, {        loader: "less-loader" // compiles Less to CSS      }]    }

有了上面的配置，即可直接使用less了

vue文件中使用less,
在App.vue中的css部分改成:

<style lang="less">#app {  font-family: 'Avenir', Helvetica, Arial, sans-serif;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  color: #2c3e50;  margin-top: 60px;}h1, h2 {  font-weight: normal;}ul {  list-style-type: none;  padding: 0;}li {  display: inline-block;  margin: 0 10px;}@color: blue;a {  background-color: @color;}</style>

注意最下面的 @color:blue; 即less的语法

测试
直接使用npm run dev 即可看到效果

0 0