webpack打包js,css和图片

1、webpack打包默认配置文件webpack.config.js

2、打包js文件:有这个文件并配置可以直接在cmd上webpack打包,没有这个文件要在cmd上输入 webpack main.js build.js

3、打包css文件:要在cmd上输入npm install style-loader css-loader 安装

module.exports={
    //配置js
    entry:‘./main.js‘,//webpack要打包的源文件
    output:{
        filename:‘build.js‘//打包输出的文件名称
    },
    module:{
        loaders:[
            {
                test:/\.css$/,      //配置css
                loader:‘style-loader!css-loader‘
            },
            {
                test: /\.(png|jpg)$/,   //配置css中的图片,html中的图片示例在下面
                loader: ‘url-loader?limit=8192‘
            }
        ]
    }
};

url-loader 后面除了 limit 字段,还可以通过 name 字段来指定图片打包的目录与文件名:

module: {
  loaders: [
    {
      test: /\.(png|jpg)$/,
      loader: ‘url-loader?limit=8192&name=images/[hash:8].[name].[ext]‘
    }
  ]
}

上例中的 name 字段指定了在打包根目录(output.path)下生成名为 images 的文件夹,并在原图片名前加上8位 hash 值。

css 文件和 images 文件夹保持了同样的层级,可以不做任务修改即能访问到图片。区别是打包后的图片加了 hash 值,bundle.css 文件里引入的也是有hash值的图片。

output.publicPath 表示资源的发布地址,当配置过该属性后,打包文件中所有通过相对路径引用的资源都会被配置的路径所替换。

output: {
  path: ‘dist‘,
  publicPath: ‘/assets/‘,
  filename: ‘bulid.js‘
}

4、打包图片:打包图片有三种,html中的图片,css中的图片,js中的图片,在 webpack 中引入图片需要依赖 url-loader 这个加载器。npm install url-loader --save-dev

   test 属性代表可以匹配的图片类型,除了 png、jpg 之外也可以添加 gif 等,以竖线隔开即开。loader 后面 limit 字段代表图片打包限制,这个限制并不是说超过了就不能打包,而是指当图片大小小于限制时会自动转成 base64 码引用。

由于 webpack 对 html 的处理不太好,打包 HTML 文件中的图片资源是相对来说最麻烦的。这里需要引用一个插件—— html-withimg-loder $ npm install html-withimg-loader --save-dev

module: {
loaders: [
    {
        test: /\.html$/,
        loader: ‘html-withimg-loader‘
    }
]
}
注:在 build.js 中引用 html 文件
import ‘../index.html‘;
JS中的图片应该是通过模块化的方式引用图片路径
var imgUrl = require(‘./images/bg.jpg‘),
imgTempl = ‘<img src="‘+imgUrl+‘" />‘;
document.body.innerHTML = imgTempl
1)需要引用的分支文件
//配置文件出口
module.exports={
    addFun:add
};
2)需要引用的主文件
require("./com.css");//引入要打包的css文件
var cale=require(‘./add.js‘);//引入要打包的js文件
console.log(cale.addFun(1,2));//调用函数方法
注:压缩build.js直接在cmd上输入webpack -p
 
时间: 2024-11-06 09:42:10

webpack打包js,css和图片的相关文章

Node.js压缩web项目中的js,css和图片

安装node.js 这个非常简单,下载下来,配置下环境变量就可以了,使用node -v查看是否安装成功 安装压缩需要的模块分别是uglify-js,clean-css,node-smushit 命令是npm install xxx ,我之前安装都是不适于全局安装的,这个应该无所谓 编写压缩的js(应该很好看懂) /*******压缩JS******/ var fs = require('fs'); var uglify = require("../../nodejs/node_modules/u

gulp实现打包js/css/img/html文件,并对js/css/img文件加上版本号

参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/4982646.html http://www.tuicool.com/articles/viequay 实现要点: 1.如何运行gulp的任务,加入新建好一个如下任务: // 语法检查 gulp.task('jshint', function () { gulp.src('js/**/*.js') .p

webpack.config.js====CSS相关:::css加载器

1. 安装: //loader加载器加载css和sass模块 cnpm install style-loader css-loader node-sass sass-loader --save-dev //loader加载器加载css和less模块 cnpm install style-loader css-loader less less-loader --save-dev //样式抽离文件 如果是webpack4.X 需要加@next //现在webpack4.x支持mini-css-ext

webpack.config.js====CSS相关:::postcss-loader加载器,自动添加前缀

1. 安装:复制拷贝文件 cnpm install postcss-loader autoprefixer --save-dev 2. webpack.config.js中使用 rules: [ //配置css加载器 { test: /\.css$/, use: cssExtract.extract({ fallback: "style-loader", use: ["css-loader", "postcss-loader"] }) }, //

webpack打包js文件

1.安装node.js 2.新建空文件夹,输入npm init -y,生成package.json文件 3. npm install -D webpack webpack-cli 4.新建三个文件夹src.out.config 5.在config文件夹下新建webpack.config.js文件 const path = require('path') module.exports={ entry:{ index:'./src/Cesium.js' }, output:{ filename:'[

js+css设置图片进行动态显示调整。

.divImg{ width:233px; height:214px; border:1px solid #e5e5e5; overflow: hidden; text-align: center; } <div class="divImg"> <img src="path"> </div> 主要是设置Img标签外层div样式,overflow: hidden; $("img").load(function()

gulp打包js/css时合并成一个文件时的顺序解决

1.可以使用插进gulp-order. 2.可以这样的写法: return gulp.src(['js/common.js','js/**/*.js']) .pipe(concat('build.js'))//合成到一个js .pipe(gulp.dest(buildBasePath+'js'))//输出到js目录 .pipe(uglify())//压缩js到一行 .pipe(concat('build.min.js'))//压缩后的js .pipe(gulp.dest(buildBasePat

vue-cli在打包后js获取的图片路径错误问题时候

在用npm run build 打包的时候,正常img标签中的src图片路径和css中的图片路径是可以正常识别的, 但是在打包js获取的图片路径时,打包后无法找到图片,原因是 js动态生成的路径无法被url-loader解析到,如果你去build,会发现图片甚至不会打包输出到dist目录(webpack是按需打包的). 如果你是vue-cli初始化的项目,解决的办法:第一步,把图片放到src同级的static目录(build/build.js文件中有一段代码是把static目录拷贝到dist/s

webpack配置:css文件打包和JS压缩打包

一.CSS文件打包 1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ color:red; font-size:20px; } 2.css建立好后,需要引入到入口文件,这里我们引入到index.js中 import css from './css/index.css'; document.write("It works."); 3.在终端安装style-loader和css-loader 4.安装好后,我们开始在webpack.confi