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

Webpack 基础使用

时间:2016-11-12 11:47:49      阅读:240      评论:0      收藏:0      [点我收藏+]

标签:name   入口   最好   dev   mil   根目录   webstorm   port   style   

使用webstorm编译:

1.新建一个工程(最基本的工程)

2.在webstorm的控制台,使用命令行     cnpm install webpack  -g  全局安装

3.安装完后,可以使用   webpack -h  查看webpack是否安装完成

4.之后,cnpm install webpack --save-dev   将webpack 安装到项目的依赖项

6.最好,安装  loader  ,cnpm install --save-dev  css-loader 和cnpm install --save-dev  style-loader 

7.在工程中,首先创建一个静态页面 index.html 和一个 JS 入口文件 entry.js(通过  webpack  生成)

8.用 一个  src  文件夹放源文件,包括css文件和js(包含js主文件main.js)

9.在当前根目录下创建一个   webpack.config.js  (1)var webpack = require(‘webpack‘);    (2

module.exports = {

       entry: ‘./src/main.js‘,

     output: {

        path: `${__dirname}/build`,
filename: ‘bundle.js‘
},
module: {
loaders: [
{test: /\.css$/, loader: ‘style!css‘}
]
}
};
10.在webstorm控制台 输入 webpack 即生成JS 入口文件 entry.js

Webpack 基础使用

标签:name   入口   最好   dev   mil   根目录   webstorm   port   style   

原文地址:http://www.cnblogs.com/libo142/p/6056249.html

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