码迷,mamicode.com
首页 > Web开发 > 详细

webpack的最简单应用,只使用js与css的打包

时间:2016-10-14 20:21:55      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:

cmd跳转到项目的文件夹,安装webpack

npm install --save-dev webpack

接着需要packjson.sj文件,全部enter掉就好了,默认值就行了

npm init

接着在项目文件夹接着安装,css-loader 和 style-loader处理样式表

npm install --save-dev style-loader css-loader

在项目文件夹新建webpack.config.js,我的内容如下

var webpack = require(‘webpack‘)

module.exports = {
  entry: __dirname+‘/js/entry.js‘,
  output: {
    path: __dirname+‘/js‘,
    filename: ‘bundle.js‘
  },
  module: {
    loaders: [
      {test: /\.css$/, loader: ‘style!css‘}
    ]
  }
}

在项目文件夹下的js文件夹里新建一个entry.js,我的内容如下

require(‘./style.css‘); // 载入 style.css
require(‘./index.js‘);//载入自身想要用的js

输出的网页的内容index.html,如下

<!-- index.html -->
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <script src="js/bundle.js"></script>
</body>
</html>

最后在命令行cmd中输入webpack就可以自动打包了(但是要记得始终要在原始目录下)

webpack的最简单应用,只使用js与css的打包

标签:

原文地址:http://www.cnblogs.com/huangqiming/p/5961506.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!