首页 > Web开发 > 详细

webpack2使用ch1-目录说明

时间:2017-04-05 21:23:12      阅读:163      评论:0      收藏:0      [点我收藏+]

1 目录解释

技术分享 webpack.config.js:配置文件,配置文件可以改成其他名,但package.json --config文件名称也要对应修改

2 webpack.config.js

//webpack 配置文件
const webpack = require(‘webpack‘),
      path = require(‘path‘);

//导出模块 common.js语法
module.exports = {
    entry: ‘./src/script/main.js‘, //打包入口
    output: { //输出
        path: path.resolve(__dirname, ‘./dist/js‘),
        filename: ‘bundle.js‘ //打包后的文件名
    }
};

3 package.json

技术分享 "scripts"里面配置了一个快捷键 “webpack” 值是这个快捷键的操作

运行 $ cnpm run webpack

4 运行后 ./dist/js/bundle.js 生成这个文件技术分享

 

5 css样式使用说明

5.1 安装依赖模块技术分享

5.2 页面载入.css文件技术分享 

5.3 命令加载对.css文件的处理技术分享 

或使用 require("style-loader!css-loader!./src/css/sytyle.css")  此时的命令就是:webpack hello.js hello.bundle.js

 

6技术分享--watch 表示监听文件修改,文件修改后自动更新,自动打包

--progress 可以看到打包的过程

--display-modules 查看打包的模块

--display-reasons 打包这些模块的原因解释

 

webpack2使用ch1-目录说明

原文:http://www.cnblogs.com/easyweb/p/6670621.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!