webpack导入css及各项loader

1. webpack导入css

1) 下载相关的加载器 npm install style-loader css-loader -D

2)将index.css引入到mian.js中

import ‘./css/index.css‘

3) 配置webpack.config.js

使用module属性

const path = require(‘path‘)

module.exports = {
    mode: ‘development‘,
    entry:path.join(__dirname,‘./src/main.js‘),//打包的那个文件
    output:{
        path:path.join(__dirname,‘./dist‘),
        filename :‘bundle.js‘
    },
    devServer:{
        open:‘true‘,
        port:‘8081‘,
        contentBase:‘src‘
    },
    module:{
        rules:[
            test: {‘/\.css$/‘,use[‘style-loader‘,‘css-loader‘]}
        ]
    }
}

重启运行 `npm run dev`

2.webpack导入图片

由于导入图片需要使用url地址,所以需要引入 `url-loader` 和 `file-loader` ( `file-loader` 依赖于 `url-loader` 所以需要一起引入)

npm i url-loader file-loader -D

.box{
  background-image:url(‘../Images/1.jpg‘)
}

配置webpack.config.js

module:{
    rules:[
        {test:/\.css$/,use:[‘style-loader‘,‘css-loader‘]},
        {test:/\.(jpg|png|gif|bmp|jpeg)$/,use: url-loader?limit=4000&name=[hash:8]-[name].[ext]‘ },
     //如果图片大于limit的大小则不会被解析成base64
        //name设置是否重命名图片,  [name].[ext]是保持引入的时候的图片的名字,[hash:8]-[name].[ext]是自动在图片原名前加一个随机的hash值,防止图片重复
        ]
}

3.webpack中引入babel

对于部分浏览器不识别的高级的ES6语法,借助 `babel` 来转化

npm install  babel-core  babel-loader  babel-plugin-transform-runtime  -D   //转换工具

npm install  babel-preset-env  babel-preset-stage-0  -D   //语法

在webpack.config.js中配置

module:{
  rules:[
        {test:/\.js$/,use:‘babel-loader‘,exclude:/node_modules/}
        //exclude是去掉不需要转换的包   ]
}

在项目的根目录下新建 `.babelrc` 的 `babel` 配置文件(JSON格式,需要符合JSON规范)

{
    "plugins":["transform-runtime"],
    "presets":["env","stage-0"]
}

4.webpack中使用模板,需要解析.vue文件

npm install vue-loader vue-template-compiler -D

在webpack.config.js中的配置

const VueLoaderPlugin = require(‘vue-loader/lib/plugin‘);
module.exports = {
  plugins:[
    new VueLoaderPlugin(),
  ],
  module:{
    rules:[
      {test:/\.vue$/,use:‘vue-loader‘},
    ]  
  },
}

高版本的webpack使用vue-loader的时候都需要配置下插件(标蓝部分)

原文地址:https://www.cnblogs.com/lskzj/p/9270839.html

时间: 2024-10-31 16:30:08

webpack导入css及各项loader的相关文章

Vue系列之 => webpack处理css文件

处理css文件 安装 npm i style-loader css-loader -D main.js import $ from 'jquery' //Es6中导入模块的方式 import './css/index.css' // import './css/index.css' webpack默认只能打包处理js类型文件 //如果需要处理非js类型的文件,我们需要手动安装一些合适的第三方loader加载器 // 1.打包处理css文件,需要安装 npm i style-loade css-l

react&webpack使用css、less && 安装原则 --- 从根本上解决问题。

在webpack-react项目中,css的使用对于不同人有不同的选择,早起是推荐在jsx文件中使用 css inline js的,但是这种方法要写很多对象来表示一个一个的标签,并且对于这些对象,我们在写样式时,还必须要使用驼峰式的写法,所以,这无疑使我们不能接受的,最好的做法就是讲css文件写在一个单独的文件夹中外联进来. webpack同时也是可以将css文件当做一个一个的模块的,所以,我们就需要对css模块的处理进行配置. npm install css-loader style-load

webpack 处理CSS

1.安装插件 npm i style-loader css-loader --save-dev npm i postcss-loader --save-dev npm i autoprefixer --save-dev npm install postcss-import --save-dev style-loader插件为:通过注入<style>标签将CSS添加到DOM中 autoprefixer 自动添加前缀 postcss-import:支持使用@import引入css 2.项目目录结构

webpack&#20998;&#31163;css&#21333;&#29420;&#25171;&#21253;

webpack分离css单独打包 字数285 阅读0 评论0 喜欢0 瞎扯 webpack 把所有的资源都当成了一个模块, CSS,Image, JS 字体文件 都是资源, 都可以打包到一个 bundle.js 文件中.但是有时候需要把样式 单独的打包成一个文件, 然后放到 CND上, 然后缓存到浏览器客户端中 这个操作很简单的,只需要一个插件就好了,就是extract-text-webpack-plugin 1. 安装extract-text-webpack-plugin npm instal

webpack教程——css的加载

首先要安装css的loader npm install css-loader style-loader --save-dev 然后在webpack.config.js中配置如下代码 意思是先用css-loader加载css文件,再用style-loader添加在页面中 在app目录下创建component.css文件 body{ background-color: red; } 在app/index.js中引入css文件 运行npm run start命令. 可以看到我们浏览器整个背景都变成了红

html 导入css 文件和js文件

切记!!!!!!!导入css文件正确格式 ,这是写给自己的.代码规范,一个标点可能影响大局,步步为营...细节决定成败...j 今天由由于在css文件导入的时候<link >写成了<link/> 但css样式有效,但是js完全无效.然后可以说一天碌碌无为,现在瞌睡的要死,还是得继续工作,记住!!细节决定成败!!!! 不要再一定正确的方法上修改,也永远不要在编程上使用试错法,不要失去对程序的信仰,问题一定在自己...

Django套用现成模板,导入css,js,images等文件【转】

环境 windows10 pycharm2017.3.3 professional edition(必须专业版) python3.6.4 django2.0.2 参考资料http://blog.csdn.net/qq_21182587/article/details/69936510 找了很多资料,就这个最全,使用最方便,感谢作者 方法 1.创建项目 参考Django项目创建流程 2.从网络上下载模板,比如模板之家 3.将模板中的html文件放入项目的template文件夹下,其实也可以放到其他

vue导入css,js和放置html代码

1.在vue页面导入css,在style scoped中(注意文件路径) <style scoped> @import "../assets/css/index.css"; @import "../assets/css/share.css"; </style> 2.js 暂时不知道怎么处理 3.html代码复制粘贴 注意:vue的template只能写一个跟div,所以在最外层套一个div然后再赋值粘贴所需要的html代码 原文地址:http

[AngularJS + Webpack] Requiring CSS &amp; Preprocessors

Making your CSS modular is a difficult thing to do, but using Webpack makes this so much easier. By adding a single line to your Webpack config, you can require you CSS, Stylus, Less, etc. files right from your directives and keep everything together