webpack4.0踩坑

最新推荐文章于 2024-06-09 21:12:07 发布

风吹云灭

最新推荐文章于 2024-06-09 21:12:07 发布

阅读量698

点赞数

分类专栏： webpack 文章标签： webpack4.0 webpack+react webpack简单使用

本文链接：https://blog.csdn.net/m0_37452696/article/details/80540595

版权

webpack 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

创建项目文件夹：

$ mkdir my-program

$ cd my-program

webpack默认是以src下的index文件作为入口文件的。

$ mkdir src/index.js

输出文件默认是dist/main.js

安装webpack ：$ npm install webpack --save-dev

安装webpack-cli:$ npm install webpack-cli --save-dev

然后我们可以试着打包：$ webpack

会出现

bash: webpack: command not found 你需要只能装全局的webpack包

Mac ：$sudo npm install webpack -g

再次运行会出现：

你需要安装全局的webpack-cli: $sudo npm install webpack-cli -g

再次运行：$webpack

打包成功出现黄色警告。

这是因为缺少mode 。

加上：$webpack --mode production

打包成功，无黄色警告。

在使用热更新的时候一定注意要加：

webpack-dev-server --mode development （--output-public-path dist 不然不会跟新页面）

加载样式需要 :$npm install style-loader css-loader -D

在使用样式时：

不能再向以前一样直接使用 import './css/index.css'

下面直接用你定义的类名使用。

这样会导致类名出现，样式不起作用。

正确的用法：

impor styleObj from './css/index.css'

加载图片需要：$npm install file-loader url-loader -D

配置文件代码：

 
  module. 
  exports = { 
 
  mode: 
  'development', 
 
  devServer: { 
 
  inline: 
  true, 
 
  port: 
  8080 
 
   }, 
 
  module: { 
 
  rules: [ 
 
   { 
 
  test: 
   / 
  \. 
  js 
  $ 
  /, 
 
  exclude: 
   / 
  ( 
  node_modules 
  | 
  bower_components 
  ) 
  /, 
 
  use:{ 
 
  loader: 
  'babel-loader', 
 
  options: { 
 
  presets: [ 
  '@babel/preset-react'] 
 
   } 
 
   } 
 
   }, 
 
   { 
 
  test: 
   / 
  \. 
  ( 
  png 
  | 
  jpg 
  | 
  gif 
  ) 
  $ 
  /, 
 
  use: [{ 
 
  loader: 
  'url-loader', 
 
  options: {} 
 
   }] 
 
   }, 
 
   { 
 
  test: 
   / 
  \. 
  css 
  $ 
  /, 
 
  use: [ 
 
   { 
  loader: 
  'style-loader' }, 
 
   { 
  loader: 
  'css-loader?modules' }, 
 
   ] 
 
   }, 
 
   ] 
 
   } 
 
   }

index.js文件：

 
  import 
  React 
  from 
  'react' 
 
 
  import 
  ReactDOM 
  from 
  'react-dom' 
 
 
  import 
  Rose 
  from 
  './../img/WechatIMG2.png' 
 
 
  import 
  mycss 
  from 
  './css/index.css' 
 

 
  class 
  App 
  extends 
  React. 
  Component { 
 
 
  render () { 
 
 
  return ( 
 
 
  < 
  div 
  className= 
  { 
  mycss. 
  hello 
  } 
  > 
 

   你好中国年 
 
 
  < 
  img 
  src= 
  { 
  Rose 
  } 
  alt= 
  '玫瑰' 
  /> 
 

   是不是对你陈诺了太多还是11ß 
 

 
  </ 
  div 
  > 
 

   ) 
 

   } 
 

   } 
 
 
  ReactDOM. 
  render( 
  < 
  App 
  />, 
  document. 
  getElementById( 
  'root')) 
 

index.css:

 
  .hello{ 
 
  width: 
  40px; 
 
  background-color: 
  red; 
 
  color: 
  red; 
 
   }

index.html:

 
  <!DOCTYPE html 
  > 
 
 
  < 
  html 
  lang= 
  "en" 
  > 
 
 
  < 
  head 
  > 
 
 
  < 
  meta 
  charset= 
  "UTF-8" 
  > 
 
 
  < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width, initial-scale=1.0" 
  > 
 
 
  < 
  meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "ie=edge" 
  > 
 
 
  < 
  title 
  >Document 
  </ 
  title 
  > 
 
 
  </ 
  head 
  > 
 
 
  < 
  body 
  > 
 
 
  < 
  div 
  id= 
  "root" 
  >123 
  </ 
  div 
  > 
 
 
  < 
  script 
  src= 
  "./dist/main.js" 
  > 
  < 
  / 
  script 
  > 
 
 
  </ 
  body 
  > 
 
 
  </ 
  html 
  > 
 